/* ===================================================================
   FCVet Admin — Custom skin
   Cargado despues de materialize.admin.min.css via <link> en base.html
   y base2.html (bloque extrastyle).
   Django 1.9 / Materialize CSS 0.100.2
   =================================================================== */

/* ---- Variables ---------------------------------------------------- */
:root {
  --fv-primary:     #5E4B8B;   /* violeta FCVet: header, iconos, foco */
  --fv-medium:      #7E6BA8;   /* violeta medio: breadcrumbs, hover de botones */
  --fv-bg-icon:     #EDEAF6;   /* tinte fondo icono y hover suave de fila */
  --fv-accent:      #F58220;   /* acento llama: hover activo, outline de foco */
  --fv-accent-tint: #FDEBD9;   /* tinte del acento: fondo icono en hover */
  --fv-page-bg:     #F4F2F8;   /* fondo general de pagina */
  --fv-card-bg:     #FFFFFF;   /* fondo de tarjetas */
  --fv-label:       #2E2A3A;   /* texto de etiquetas (WCAG AA sobre blanco) */
}


/* ===================================================================
   HEADER / NAVEGACION
   =================================================================== */

body {
  background: var(--fv-page-bg);
}

/* Topbar: violeta primario, fijo al scroll.
   position:sticky funciona porque ningún ancestro entre <html> y <nav>
   tiene overflow distinto de visible. html{overflow-y:scroll} es el
   scroll-container; sticky se ancla al viewport. */
nav.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--fv-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20);   /* materialize.admin.css lo quita con "none" */
}

/* Breadcrumbs: violeta medio, levemente mas claro que el topbar */
nav.breadcrumbs {
  background-color: var(--fv-medium);
}
nav.breadcrumbs a {
  color: rgba(255, 255, 255, 0.80);
}
nav.breadcrumbs a.active {
  color: #fff;
}

/* Titulo del sistema: materialize.admin.css aplica font-size:2.5rem y
   font-weight:100 sobre .brand-logo; la clase .page-title no tiene
   definicion propia y hereda esos valores.
   Especificidad (0,3,2) > nav.topbar .brand-logo (0,2,1) — sin !important.
   Si 500 queda muy fuerte, probar font-weight:400. */
nav.topbar .brand-logo a.page-title {
  font-size: 1.2rem;        /* 2.5rem ≈ 37px → ≈ 18px; no compite con el contenido */
  font-weight: 500;         /* 100 (ultralight) → medium */
  letter-spacing: 0.025em;  /* leve respiro entre caracteres */
  vertical-align: middle;   /* alinea el texto al centro vertical del logo */
}


/* ===================================================================
   TARJETAS DEL DASHBOARD (app-list)
   =================================================================== */

/* Contenedor de seccion: fondo blanco, borde sutil, sombra, corners 8px */
.app-list .app .card {
  background: var(--fv-card-bg);
  border: 1px solid rgba(94, 75, 139, 0.12);
  box-shadow: 0 2px 8px rgba(94, 75, 139, 0.08);
  border-radius: 8px;
}

/* Titulo de seccion (ej. "Academica", "Cursos").
   !important necesario: la clase .black-text del template aplica
   color:#000!important (Materialize utility). Ambas reglas tienen
   !important con igual especificidad; gana la ultima en cascade (esta). */
.app-list .app .card .card-content .card-title {
  color: var(--fv-primary) !important;
  border-left: 4px solid var(--fv-primary);
  padding-left: 12px;
  font-weight: 500;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Gaps parejos entre tiles.
   !important necesario: materialize.admin.css aplica padding-left:0!important */
.app-list .app .card .app-item {
  padding-left: 5px !important;
  padding-right: 5px;
}

/* Eliminar margen inferior del row interno */
.app-list .app .card .card-content .row {
  margin-bottom: 0;
}

/* Tile individual: fondo blanco, flex para centrar icono+label
   Especificidad (0,4,1) igual al original; gana por cascade (carga despues). */
.app-list .app .card .app-item a {
  background: var(--fv-card-bg);
  color: var(--fv-medium);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid rgba(94, 75, 139, 0.08);
  padding: 0;
  height: 130px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 0;
  position: relative;
  transition: box-shadow 150ms ease, transform 150ms ease, border-color 150ms ease;
  cursor: pointer;
}

/* Hover del tile: elevacion */
.app-list .app .card .app-item a:hover {
  box-shadow: 0 6px 20px rgba(94, 75, 139, 0.18);
  transform: translateY(-2px);
  border-color: rgba(94, 75, 139, 0.25);
  text-decoration: none;
}

/* Icono en circulo.
   Especificidad (0,4,2) supera al original (0,4,1) — gana sin !important. */
.app-list .app .card .app-item a i.material-icons {
  font-size: 32px;
  width: 56px;
  height: 56px;
  line-height: 56px;
  border-radius: 50%;
  background: var(--fv-bg-icon);
  color: var(--fv-primary);
  text-align: center;
  flex-shrink: 0;
  margin-bottom: 8px;
  transition: background 150ms ease, color 150ms ease;
}

/* Hover del icono: acento calido */
.app-list .app .card .app-item a:hover i.material-icons {
  background: var(--fv-accent-tint);
  color: var(--fv-accent);
}

/* Etiqueta de texto: contraste WCAG AA sobre fondo blanco */
.app-list .app .card .app-item a h6 {
  color: var(--fv-label);
  margin: 0;
  padding: 4px 8px;
  font-size: 0.82rem;
}

/* Foco accesible por teclado — baseline para todos los navegadores */
.app-list .app .card .app-item a:focus {
  outline: 3px solid var(--fv-accent);
  outline-offset: 2px;
}

/* :focus-visible: mejora progresiva.
   En navegadores con soporte: oculta el outline en clicks de mouse y
   lo muestra solo al navegar con teclado.
   @supports aisla el bloque para no afectar navegadores sin soporte. */
@supports selector(:focus-visible) {
  .app-list .app .card .app-item a:focus:not(:focus-visible) {
    outline: none;
  }
  .app-list .app .card .app-item a:focus-visible {
    outline: 3px solid var(--fv-accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px rgba(245, 130, 32, 0.25);
  }
}


/* ===================================================================
   BOTONES
   =================================================================== */

/* .btn / .btn-large → violeta por defecto.
   Las clases de color de Materialize (.red, .orange, etc.) usan
   background-color:…!important y conservan su color original. */
.btn,
.btn-large {
  background-color: var(--fv-primary);
}
.btn:hover, .btn:focus, .btn:active,
.btn-large:hover, .btn-large:focus, .btn-large:active {
  background-color: var(--fv-medium);
}

/* .btn-flat → texto violeta, tinte de fondo al hover */
.btn-flat {
  color: var(--fv-primary);
}
.btn-flat:hover,
.btn-flat:focus {
  background-color: rgba(94, 75, 139, 0.08);
  color: var(--fv-primary);
}

/* .btn-floating (FAB) → violeta.
   !important necesario: los FABs del template llevan clase .red que usa
   background-color:…!important. Con igual especificidad y !important,
   gana el ultimo en cascade (este archivo). */
.btn-floating {
  background-color: var(--fv-primary) !important;
}
.btn-floating:hover,
.btn-floating:focus {
  background-color: var(--fv-medium) !important;
}


/* ===================================================================
   FORMULARIOS — inputs, selects, checkboxes, radios, switches
   =================================================================== */

/* Linea de foco y sombra de input / textarea.
   Materialize usa input[type=text]:focus:not([readonly]) (0,3,1) sin !important.
   Nuestra regla .input-field input:focus:not([readonly]) tiene la misma
   especificidad y gana por orden de cascade (cargamos despues). */
.input-field input:focus:not([readonly]),
.input-field textarea:focus:not([readonly]) {
  border-bottom: 1px solid var(--fv-primary);
  box-shadow: 0 1px 0 0 var(--fv-primary);
}

/* Color del label al enfocar — igual analisis de especificidad */
.input-field input:focus:not([readonly]) + label,
.input-field textarea:focus:not([readonly]) + label {
  color: var(--fv-primary);
}

/* Icono prefix activo */
.input-field .prefix.active {
  color: var(--fv-primary);
}

/* Select: linea de foco — igual especificidad que Materialize, gana por cascade */
.select-wrapper input.select-dropdown:focus {
  border-bottom: 1px solid var(--fv-primary);
}

/* Item seleccionado en el dropdown del select */
.select-dropdown.dropdown-content li.selected > span {
  color: var(--fv-primary);
}

/* Checkbox estandar */
[type="checkbox"]:checked + label::before {
  border-right: 2px solid var(--fv-primary);
  border-bottom: 2px solid var(--fv-primary);
}

/* Checkbox filled-in */
[type="checkbox"].filled-in:checked + label::after {
  background-color: var(--fv-primary);
  border: 2px solid var(--fv-primary);
}

/* Radio */
[type="radio"]:checked + label::after {
  background-color: var(--fv-primary);
  border: 2px solid var(--fv-primary);
}
[type="radio"].with-gap:checked + label::before,
[type="radio"].with-gap:checked + label::after {
  border: 2px solid var(--fv-primary);
}
[type="radio"].with-gap:checked + label::after {
  background-color: var(--fv-primary);
}

/* Switch */
.switch label input[type="checkbox"]:checked + .lever {
  background-color: var(--fv-bg-icon);
}
.switch label input[type="checkbox"]:checked + .lever::after {
  background-color: var(--fv-primary);
}


/* ===================================================================
   TABLAS Y COLECCIONES
   =================================================================== */

/* Hover de fila en tono violeta muy suave */
table.highlight > tbody > tr:hover {
  background-color: var(--fv-bg-icon);
}

/* Acento inferior en el encabezado de tabla de resultados */
.results table > thead > tr {
  border-bottom: 2px solid var(--fv-primary);
}

/* Links de ordenamiento en cabecera.
   Especificidad (0,1,5) supera al original .results table thead a (0,1,3). */
.results table > thead > tr th a,
.results table > thead > tr th a:visited {
  color: var(--fv-primary);
}

/* Links en filas — misma especificidad que .results table tbody a, gana por cascade */
.results table tbody a {
  color: var(--fv-primary);
}

/* Panel lateral "Tools": encabezado violeta */
.collection .collection-header {
  background-color: var(--fv-primary);
  padding: 8px 20px;
}
.collection .collection-header h5 {
  color: #fff;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 400;
}
.collection .collection-item a {
  color: var(--fv-primary);
}

/* Titulo de card en paginas de formulario */
.change-form .card .card-title {
  color: var(--fv-primary);
  font-weight: 400;
}

/* Links dentro del formulario.
   .btn / .btn-floating conservan su color porque tienen white-text!important.
   .deletelink.btn.red conserva fondo rojo (clase .red usa !important) y
   texto blanco (white-text!important). */
.change-form a {
  color: var(--fv-primary);
}


/* ===================================================================
   TABS Y PAGINACION
   =================================================================== */

.tabs .tab a {
  color: rgba(94, 75, 139, 0.70);
}
.tabs .tab a:hover,
.tabs .tab a.active,
.tabs .tab a:focus {
  color: var(--fv-primary);
}
.tabs .indicator {
  background-color: var(--fv-primary);
}

.pagination li.active {
  background-color: var(--fv-primary);
}
.pagination li a {
  color: var(--fv-primary);
}
.pagination li a:hover {
  background-color: var(--fv-bg-icon);
  color: var(--fv-primary);
}


/* ===================================================================
   DROPDOWNS Y MODALES
   =================================================================== */

/* Dropdown generico de Materialize */
.dropdown-content li > a,
.dropdown-content li > span {
  color: var(--fv-primary);
}

/* Modal footer (botones de accion del modal) */
.modal .modal-footer .btn-flat {
  color: var(--fv-primary);
}
.modal .modal-footer .btn-flat:hover {
  background-color: var(--fv-bg-icon);
}


/* ===================================================================
   LOGIN
   El template del paquete inyecta su <style> con colores hardcodeados
   ANTES de {{ block.super }}, así que nuestro <link> se carga DESPUÉS
   en el DOM. Misma especificidad de ID (1,0,0) → ganamos por cascade.
   =================================================================== */

/* Botón "Entrar": alinea al violeta primario (original: #580c5f) */
#entrar {
  background-color: var(--fv-primary);
}

/* Botón "Registrarse": alinea al violeta medio (original: #865f8a) */
#registrarse {
  background-color: var(--fv-medium);
}
