/* ============================================================
   Criadero San Ignacio — Panel de instrumentos
   Estética retro-futurista de consola, calibrada para lectura
   en exterior y para usuarios mayores:
   - texto base 18px, controles de 52px, contraste AA/AAA
   - el "retro" vive en bordes, biseles, mono y brillo de foco,
     nunca a costa del contraste del texto
   ============================================================ */

:root{
  /* Consola (shell oscuro) */
  --con-900:#0b1219;
  --con-800:#101b26;
  --con-700:#172634;
  --con-line:#24425c;

  /* Papel (superficies de lectura) */
  --paper:#f5f2ea;
  --paper-raised:#fffdf8;
  --paper-sunk:#ebe6da;
  --ink:#11161d;
  --ink-soft:#4a5461;
  --rule:#c9c1b0;

  /* Acentos */
  --amber:#ffb020;         /* sobre oscuro */
  --amber-ink:#8a4b00;     /* sobre claro (AA) */
  --cyan:#4fd8d0;          /* sobre oscuro */
  --cyan-ink:#0b6b74;      /* sobre claro (AA) */

  /* Estados */
  --ok:#1a7f37;  --ok-bg:#dcf5e2;
  --bad:#b42318; --bad-bg:#fde7e5;
  --sold:#1f5fa9;--sold-bg:#e0edfb;
  --warn:#96620a;--warn-bg:#fdf0d5;

  --r:10px;
  --tap:52px;
  --shadow:0 1px 0 #fff inset, 0 2px 10px rgba(11,18,25,.10);
}

/* ---------- Base ---------- */
html{ -webkit-text-size-adjust:100%; }
body{
  background:var(--paper);
  color:var(--ink);
  font-size:18px;
  line-height:1.55;
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
}
/* Identificadores: se leen como lectura de instrumento */
.diio,.mono,td.diio,.badge-diio{
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,"Roboto Mono","DejaVu Sans Mono",monospace;
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}
h1,h2,h3,h4,h5{ font-weight:700; letter-spacing:-.01em; }
h1{ font-size:1.9rem } h2{ font-size:1.55rem } h3{ font-size:1.3rem }
a{ color:var(--cyan-ink); text-underline-offset:3px; }
a:hover{ color:var(--amber-ink); }

/* Foco visible y generoso: accesibilidad + guiño retro */
:focus-visible{
  outline:3px solid var(--cyan-ink);
  outline-offset:2px;
  border-radius:4px;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:2000;
  background:var(--amber); color:#000; padding:.9rem 1.4rem;
  font-weight:700; border-radius:0 0 var(--r) 0;
}
.skip-link:focus{ left:0; }

/* ---------- Consola superior ---------- */
.navbar.console{
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
    linear-gradient(180deg,var(--con-800),var(--con-900));
  border-bottom:3px solid var(--amber);
  box-shadow:0 4px 18px rgba(11,18,25,.28);
  padding-block:.35rem;
}
/* La barra lleva la insignia, dibujada para tamaño chico. El logo ovalado del
   criadero (logo-sanignacio) va en el acceso: a 52px su texto es ilegible. */
.navbar.console .navbar-logo{ height:52px; width:52px; object-fit:contain; flex:0 0 auto; }
/* Marca: la insignia es la imagen, el nombre es texto real —
   así queda nítido a cualquier tamaño y lo lee un lector de pantalla */
.navbar.console .marca{ display:flex; flex-direction:column; line-height:1.12; min-width:0; }
.navbar.console .marca-nombre{
  font-size:1.18rem; font-weight:800; color:#fff; letter-spacing:.01em; white-space:nowrap;
}
.navbar.console .marca-sub{
  font-size:.74rem; font-weight:600; color:var(--cyan);
  letter-spacing:.10em; text-transform:uppercase; white-space:nowrap;
}
.navbar.console .nav-link{
  color:#e8eef5;
  font-size:1.02rem;
  font-weight:600;
  min-height:var(--tap);
  display:flex; align-items:center; gap:.5rem;
  padding:.55rem .9rem;
  border-radius:var(--r);
  border:1px solid transparent;
}
.navbar.console .nav-link:hover,
.navbar.console .nav-link:focus-visible{
  background:var(--con-700);
  border-color:var(--con-line);
  color:#fff;
}
.navbar.console .nav-link.active{
  background:var(--con-700);
  border-color:var(--amber);
  color:var(--amber);
  box-shadow:0 0 0 1px rgba(255,176,32,.25), 0 0 14px rgba(255,176,32,.18);
}
.navbar.console .nav-link .ico{ font-size:1.2rem; line-height:1; }
.navbar.console .nav-link-exit{ color:#ffc9c2; }
.navbar.console .navbar-toggler{
  border:2px solid var(--con-line);
  min-height:var(--tap); min-width:var(--tap);
}
.navbar.console .navbar-toggler:focus{ box-shadow:0 0 0 3px rgba(79,216,208,.4); }

/* ---------- Superficies ---------- */
.card,.panel{
  background:var(--paper-raised);
  border:2px solid var(--rule);
  border-radius:var(--r);
  box-shadow:var(--shadow);
}
.card-header,.panel-head{
  background:linear-gradient(180deg,var(--con-800),var(--con-700));
  color:#eef4fa;
  border-bottom:2px solid var(--amber);
  font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; font-size:.95rem;
  padding:.7rem 1rem;
  border-radius:8px 8px 0 0;
}
.card-header .ico{ color:var(--amber); }

/* Bisel de esquina: el detalle retro, puramente decorativo */
.beveled{ position:relative; }
.beveled::after{
  content:""; position:absolute; right:-2px; top:-2px;
  width:18px; height:18px; pointer-events:none;
  background:var(--amber);
  clip-path:polygon(100% 0,100% 100%,0 0);
  border-top-right-radius:8px;
}

/* ---------- Controles ---------- */
.btn{
  min-height:var(--tap);
  font-size:1.02rem; font-weight:650;
  border-width:2px; border-radius:var(--r);
  padding:.6rem 1.25rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
}
.btn-sm{ min-height:44px; font-size:.95rem; padding:.4rem .85rem; }
.btn-primary{
  background:var(--con-800); border-color:var(--con-900); color:#fff;
}
.btn-primary:hover,.btn-primary:focus{
  background:var(--con-700); border-color:var(--amber); color:var(--amber);
}
.btn-warning,.btn-accent{
  background:var(--amber); border-color:#c9860f; color:#2b1a00; font-weight:700;
}
.btn-warning:hover,.btn-accent:hover{ background:#ffc247; color:#2b1a00; }
.btn-outline-secondary{ border-color:var(--ink-soft); color:var(--ink); }
.btn-outline-secondary:hover{ background:var(--ink); color:#fff; }

.form-control,.form-select{
  min-height:var(--tap);
  font-size:1.05rem;
  border:2px solid var(--rule);
  border-radius:var(--r);
  background:var(--paper-raised);
  color:var(--ink);
}
.form-control:focus,.form-select:focus{
  border-color:var(--cyan-ink);
  box-shadow:0 0 0 4px rgba(14,116,116,.18);
}
.form-label{ font-weight:650; font-size:1rem; margin-bottom:.35rem; }
.form-text{ font-size:.92rem; color:var(--ink-soft); }

/* ---------- Estados ---------- */
.estado{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:700; font-size:.95rem;
  padding:.3rem .7rem; border-radius:999px; border:2px solid currentColor;
}
.estado::before{ content:""; width:.6rem; height:.6rem; border-radius:50%; background:currentColor; }
.estado-vivo{    color:var(--ok);   background:var(--ok-bg); }
.estado-muerto{  color:var(--bad);  background:var(--bad-bg); }
.estado-vendido{ color:var(--sold); background:var(--sold-bg); }

/* ---------- Alertas ---------- */
.alert{
  font-size:1.02rem; border-width:2px; border-left-width:8px;
  border-radius:var(--r);
}

/* ---------- Tablas: fila en desktop, ficha en móvil ---------- */
.table{ font-size:1rem; }
.table > :not(caption) > * > *{ padding:.85rem .7rem; }
.table thead th{
  background:var(--con-800); color:#eef4fa;
  border-bottom:2px solid var(--amber);
  text-transform:uppercase; letter-spacing:.04em; font-size:.85rem;
  white-space:nowrap;
}
.table tbody tr:nth-child(even){ background:var(--paper-sunk); }
.table-hover tbody tr:hover{ background:#fdf3dd; }

@media (max-width:767.98px){
  .table-cards thead{ display:none; }
  .table-cards tbody tr{
    display:block;
    background:var(--paper-raised);
    border:2px solid var(--rule);
    border-left:8px solid var(--amber);
    border-radius:var(--r);
    margin-bottom:1rem;
    padding:.35rem .25rem;
    box-shadow:var(--shadow);
  }
  .table-cards tbody tr:nth-child(even){ background:var(--paper-raised); }
  .table-cards tbody td{
    display:flex; justify-content:space-between; align-items:center; gap:1rem;
    border:0; border-bottom:1px dashed var(--rule);
    padding:.6rem .8rem; text-align:right;
  }
  .table-cards tbody td:last-child{ border-bottom:0; justify-content:stretch; }
  .table-cards tbody td::before{
    content:attr(data-label);
    font-weight:700; font-size:.82rem; text-transform:uppercase;
    letter-spacing:.04em; color:var(--ink-soft); text-align:left;
  }
  .table-cards tbody td:last-child::before{ display:none; }
  .table-cards tbody td:last-child .btn{ width:100%; }
}

/* Cualquier tabla ancha que quede en modo fila puede desplazarse sola */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ---------- Utilidades ---------- */
.page-head{
  display:flex; flex-wrap:wrap; gap:1rem;
  align-items:center; justify-content:space-between;
  margin-bottom:1.25rem; padding-bottom:.75rem;
  border-bottom:3px solid var(--rule);
}
.page-head h1,.page-head h2{ margin:0; }
.stat{
  background:var(--paper-raised); border:2px solid var(--rule);
  border-top:5px solid var(--cyan-ink);
  border-radius:var(--r); padding:1rem; text-align:center; height:100%;
}
.stat .n{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:2.2rem; font-weight:700; line-height:1.1; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.stat .l{
  font-size:.9rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--ink-soft);
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* Foto ausente: el archivo puede faltar aunque la ruta esté en la base */
.foto-faltante{
  margin-top:.5rem; padding:2rem 1rem; text-align:center;
  background:var(--paper-sunk); border:2px dashed var(--rule);
  border-radius:var(--r); color:var(--ink-soft); font-weight:600;
}

/* Un botón nunca debe ensanchar la página: si el espacio aprieta,
   primero cede el relleno y después el texto se parte en dos líneas. */
.btn{ min-width:0; max-width:100%; }
@media (max-width:991.98px){
  .btn{ padding-inline:.85rem; }
  .d-grid > .btn, .flex-fill.btn{ white-space:normal; }
}

/* La barra queda colapsada hasta 1400px: con texto grande la fila
   horizontal no entra en una tablet, y el menú desplegable es además
   más cómodo de tocar. */
@media (max-width:1399.98px){
  .navbar.console .navbar-collapse{ max-height:80vh; overflow-y:auto; }
  .navbar.console .nav-link{ font-size:1.1rem; padding:.75rem .9rem; }
}

/* Franja justa: apenas expandida (1400px, el xxl de Bootstrap) la fila de 8
   enlaces necesita ~1402px y se partía en tres. Se achica el aire lateral de
   los enlaces, nunca la letra: la legibilidad no se negocia. Arriba de 1500px
   vuelve el aire completo. */
@media (min-width:1400px) and (max-width:1499.98px){
  .navbar.console .nav-link{ padding-left:.55rem; padding-right:.55rem; }
}

/* El ícono del menú venía de .navbar-dark, que la consola reemplazó */
.navbar.console .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffb020' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Ficha móvil compacta: el DIIO es el título y el ID interno se oculta,
   para recorrer cien animales sin scroll interminable */
@media (max-width:767.98px){
  .table-cards tbody td[data-label="ID"]{ display:none; }
  .table-cards tbody tr{ padding:0; overflow:hidden; }
  .table-cards tbody td[data-label="DIIO"]{
    display:block; text-align:left;
    background:linear-gradient(180deg,var(--con-800),var(--con-700));
    color:var(--amber); font-size:1.35rem; font-weight:700;
    padding:.7rem .9rem; border-bottom:2px solid var(--amber);
  }
  .table-cards tbody td[data-label="DIIO"]::before{ display:none; }
  .table-cards tbody td{ padding:.5rem .9rem; }
  .table-cards tbody td:last-child{ padding:.7rem .9rem; }
}

/* ---------- Pantalla de acceso ---------- */
/* El fondo va solo acá: en las pantallas de trabajo compite con la lectura */
body.pagina-acceso{
  background-color:var(--con-900);
  background-image:url('../img/login-fondo.jpg');
  background-image:image-set(
    url('../img/login-fondo.webp') type('image/webp'),
    url('../img/login-fondo.jpg')  type('image/jpeg'));
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
  min-height:100vh;
}
/* En pantallas chicas el fijo salta al aparecer el teclado */
@media (max-width:768px){
  body.pagina-acceso{ background-attachment:scroll; }
}

/* El logo del criadero como marca de agua detrás del formulario. Va en un
   pseudo-elemento y no en `background-image` del propio cuerpo, porque así se
   puede bajar la opacidad sin tocar la del texto. La opacidad es baja a
   propósito: acá la prioridad es leer las etiquetas, no lucir el logo. */
.acceso-tarjeta .card-body{ position:relative; }
.acceso-tarjeta .card-body::before{
  content:"";
  position:absolute; inset:0;
  background:url('../img/logo-sanignacio.png') center/min(340px,90%) no-repeat;
  opacity:.26;   /* medido: la tinta sigue dando 17,86:1 sobre el fondo real */
  pointer-events:none;   /* no debe robarle el clic a los campos */
}
/* El formulario va por encima de la marca de agua */
.acceso-tarjeta .card-body > *{ position:relative; z-index:1; }

/* Los campos se opacan para que el logo no se transparente por debajo del
   texto que el usuario escribe */
.acceso-tarjeta .form-control,
.acceso-tarjeta .input-group{ background-color:var(--paper-raised); }

/* Si el usuario pidió menos movimiento/decoración, la marca de agua sobra */
@media (prefers-reduced-transparency:reduce){
  .acceso-tarjeta .card-body::before{ display:none; }
}