/* ==========================================================================
   E.P.S.A. CAYFE SAS — sistema de diseño
   Los colores salieron de muestrear las maquetas de referencia, no de
   estimarlos a ojo. El azul marino coincide con el del logo oficial.
   ========================================================================== */

:root {
  /* Marca — muestreados de las referencias visuales */
  --navy-900: #052E56;   /* sidebar */
  --navy-800: #0A3C6B;
  --navy-700: #14527F;
  --cyan-500: #35C4DC;   /* acento y botones */
  --cyan-600: #1FA6C1;   /* al pasar el mouse */
  --cyan-400: #5FD4E6;
  --cyan-100: #D8F3F9;
  --naranja: #E69141;    /* del logo, muy poco usado */

  /* Superficies de vidrio */
  --fondo: #E8F1F9;
  --card: rgba(255, 255, 255, .86);
  --card-solida: #FFFFFF;
  /* Cajas suaves dentro de una tarjeta: la descripcion de una urgencia,
     la ficha de la mascota, el texto de un PQRS. Va como variable y no
     escrita a mano en cada sitio, porque un color escrito a mano no sabe
     en que tono esta: en oscuro quedaba texto casi blanco sobre fondo
     casi blanco. */
  --caja-suave: rgba(255, 255, 255, .6);
  --borde: rgba(255, 255, 255, .9);
  --borde-fuerte: rgba(11, 61, 102, .16);

  /* Texto */
  --texto: #0F3450;
  --texto-medio: #3D5B75;
  --texto-suave: #5C778F;

  /* Estados */
  --ok: #12A150;      --ok-bg: rgba(18, 161, 80, .12);
  --alerta: #C2820B;  --alerta-bg: rgba(194, 130, 11, .13);
  --error: #DC2626;   --error-bg: rgba(220, 38, 38, .11);
  --info: #2563EB;    --info-bg: rgba(37, 99, 235, .11);
  /* El texto y el borde de los avisos. Van como variables porque el fondo
     tambien lo es: si el fondo sabe en que tono esta y el texto no, en
     oscuro queda rojo oscuro sobre fondo oscuro. Estos valores son
     exactamente los que estaban escritos a mano, asi que el tono claro no
     cambia. */
  --ok-texto: #14532D;     --ok-borde: #B7E4C7;
  --alerta-texto: #8A5D06; --alerta-borde: #F2E0B4;
  --error-texto: #991B1B;  --error-borde: #F5C2C0;

  --radio: 16px;
  --radio-sm: 11px;
  --sombra: 0 2px 10px rgba(10, 60, 107, .07);
  --sombra-md: 0 8px 28px rgba(10, 60, 107, .12);
  --sidebar-w: 236px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Huellas muy tenues sobre el azul: se sienten sin estorbar la lectura */
  background-color: var(--fondo);
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22240%22%20height=%22260%22%20viewBox=%220%200%20240%20260%22%3E%3Cg%20fill=%22%23FFFFFF%22%3E%3Cg%20transform=%22translate(38,34)%20rotate(-18)%20scale(1.0)%22%3E%3Cellipse%20cx=%220%22%20cy=%2213%22%20rx=%2210.5%22%20ry=%228.5%22/%3E%3Cellipse%20cx=%22-10.5%22%20cy=%22-2%22%20rx=%224.2%22%20ry=%225.8%22/%3E%3Cellipse%20cx=%22-3.5%22%20cy=%22-8.5%22%20rx=%224.2%22%20ry=%226.2%22/%3E%3Cellipse%20cx=%224.5%22%20cy=%22-7.5%22%20rx=%224.2%22%20ry=%226.2%22/%3E%3Cellipse%20cx=%2211.5%22%20cy=%22-0.5%22%20rx=%224.2%22%20ry=%225.8%22/%3E%3C/g%3E%3Cg%20transform=%22translate(128,70)%20rotate(22)%20scale(0.78)%22%3E%3Cellipse%20cx=%220%22%20cy=%2213%22%20rx=%2210.5%22%20ry=%228.5%22/%3E%3Cellipse%20cx=%22-10.5%22%20cy=%22-2%22%20rx=%224.2%22%20ry=%225.8%22/%3E%3Cellipse%20cx=%22-3.5%22%20cy=%22-8.5%22%20rx=%224.2%22%20ry=%226.2%22/%3E%3Cellipse%20cx=%224.5%22%20cy=%22-7.5%22%20rx=%224.2%22%20ry=%226.2%22/%3E%3Cellipse%20cx=%2211.5%22%20cy=%22-0.5%22%20rx=%224.2%22%20ry=%225.8%22/%3E%3C/g%3E%3Cg%20transform=%22translate(72,118)%20rotate(12)%20scale(0.62)%22%3E%3Cellipse%20cx=%220%22%20cy=%2213%22%20rx=%2210.5%22%20ry=%228.5%22/%3E%3Cellipse%20cx=%22-10.5%22%20cy=%22-2%22%20rx=%224.2%22%20ry=%225.8%22/%3E%3Cellipse%20cx=%22-3.5%22%20cy=%22-8.5%22%20rx=%224.2%22%20ry=%226.2%22/%3E%3Cellipse%20cx=%224.5%22%20cy=%22-7.5%22%20rx=%224.2%22%20ry=%226.2%22/%3E%3Cellipse%20cx=%2211.5%22%20cy=%22-0.5%22%20rx=%224.2%22%20ry=%225.8%22/%3E%3C/g%3E%3Cg%20transform=%22translate(168,150)%20rotate(-25)%20scale(0.9)%22%3E%3Cellipse%20cx=%220%22%20cy=%2213%22%20rx=%2210.5%22%20ry=%228.5%22/%3E%3Cellipse%20cx=%22-10.5%22%20cy=%22-2%22%20rx=%224.2%22%20ry=%225.8%22/%3E%3Cellipse%20cx=%22-3.5%22%20cy=%22-8.5%22%20rx=%224.2%22%20ry=%226.2%22/%3E%3Cellipse%20cx=%224.5%22%20cy=%22-7.5%22%20rx=%224.2%22%20ry=%226.2%22/%3E%3Cellipse%20cx=%2211.5%22%20cy=%22-0.5%22%20rx=%224.2%22%20ry=%225.8%22/%3E%3C/g%3E%3Cg%20transform=%22translate(14,168)%20rotate(30)%20scale(0.7)%22%3E%3Cellipse%20cx=%220%22%20cy=%2213%22%20rx=%2210.5%22%20ry=%228.5%22/%3E%3Cellipse%20cx=%22-10.5%22%20cy=%22-2%22%20rx=%224.2%22%20ry=%225.8%22/%3E%3Cellipse%20cx=%22-3.5%22%20cy=%22-8.5%22%20rx=%224.2%22%20ry=%226.2%22/%3E%3Cellipse%20cx=%224.5%22%20cy=%22-7.5%22%20rx=%224.2%22%20ry=%226.2%22/%3E%3Cellipse%20cx=%2211.5%22%20cy=%22-0.5%22%20rx=%224.2%22%20ry=%225.8%22/%3E%3C/g%3E%3Cg%20transform=%22translate(112,196)%20rotate(-8)%20scale(0.85)%22%3E%3Cellipse%20cx=%220%22%20cy=%2213%22%20rx=%2210.5%22%20ry=%228.5%22/%3E%3Cellipse%20cx=%22-10.5%22%20cy=%22-2%22%20rx=%224.2%22%20ry=%225.8%22/%3E%3Cellipse%20cx=%22-3.5%22%20cy=%22-8.5%22%20rx=%224.2%22%20ry=%226.2%22/%3E%3Cellipse%20cx=%224.5%22%20cy=%22-7.5%22%20rx=%224.2%22%20ry=%226.2%22/%3E%3Cellipse%20cx=%2211.5%22%20cy=%22-0.5%22%20rx=%224.2%22%20ry=%225.8%22/%3E%3C/g%3E%3Cg%20transform=%22translate(186,42)%20rotate(15)%20scale(0.55)%22%3E%3Cellipse%20cx=%220%22%20cy=%2213%22%20rx=%2210.5%22%20ry=%228.5%22/%3E%3Cellipse%20cx=%22-10.5%22%20cy=%22-2%22%20rx=%224.2%22%20ry=%225.8%22/%3E%3Cellipse%20cx=%22-3.5%22%20cy=%22-8.5%22%20rx=%224.2%22%20ry=%226.2%22/%3E%3Cellipse%20cx=%224.5%22%20cy=%22-7.5%22%20rx=%224.2%22%20ry=%226.2%22/%3E%3Cellipse%20cx=%2211.5%22%20cy=%22-0.5%22%20rx=%224.2%22%20ry=%225.8%22/%3E%3C/g%3E%3Cg%20transform=%22translate(56,232)%20rotate(-20)%20scale(0.6)%22%3E%3Cellipse%20cx=%220%22%20cy=%2213%22%20rx=%2210.5%22%20ry=%228.5%22/%3E%3Cellipse%20cx=%22-10.5%22%20cy=%22-2%22%20rx=%224.2%22%20ry=%225.8%22/%3E%3Cellipse%20cx=%22-3.5%22%20cy=%22-8.5%22%20rx=%224.2%22%20ry=%226.2%22/%3E%3Cellipse%20cx=%224.5%22%20cy=%22-7.5%22%20rx=%224.2%22%20ry=%226.2%22/%3E%3Cellipse%20cx=%2211.5%22%20cy=%22-0.5%22%20rx=%224.2%22%20ry=%225.8%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(1200px 700px at 78% -8%, rgba(255,255,255,.75), transparent 62%);
  background-repeat: repeat, no-repeat;
  background-size: 240px 260px, auto;
  background-attachment: fixed, fixed;
  color: var(--texto);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--cyan-500);
  outline-offset: 2px;
  border-radius: 4px;
}

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

/* ============================ ESTRUCTURA ============================ */

.app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  background: linear-gradient(178deg, #063056 0%, #04264A 100%);
  box-shadow: 4px 0 24px rgba(5, 46, 86, .16);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  transition: transform .22s ease;
}

.principal {
  flex: 1;
  margin-left: var(--sidebar-w);
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ============================ SIDEBAR ============================ */

.marca {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 20px 18px;
}
.marca img { width: 34px; height: auto; display: block; }
.marca-texto strong {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
}
.marca-texto span {
  display: block;
  font-size: 10.5px;
  color: rgba(255,255,255,.5);
  line-height: 1.3;
  margin-top: 2px;
}

.nav {
  padding: 6px 12px;
  flex: 1;
  /* Con muchas secciones el menú se desplaza solo, sin mover la página */
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.24) transparent;
}
/* Barra discreta, para que se note que hay más abajo */
.nav::-webkit-scrollbar { width: 5px; }
.nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 999px; }
.nav::-webkit-scrollbar-track { background: transparent; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 7px 12px;
  margin-bottom: 1px;
  border-radius: 12px;
  color: rgba(255,255,255,.72);
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  transition: background .15s, color .15s;
}
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .85; }
.nav-item:hover { background: rgba(255,255,255,.09); color: #fff; }
.nav-item.activo {
  background: var(--cyan-500);
  color: #04283F;
  font-weight: 650;
  box-shadow: 0 4px 14px rgba(53, 196, 220, .32);
}
.nav-item.activo svg { color: #04283F; opacity: 1; }

.nav-grupo {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: rgba(255,255,255,.35);
  padding: 10px 12px 4px;
  font-weight: 600;
}

.sidebar-pie { padding: 14px; }
.tarjeta-promesa {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radio);
  padding: 14px;
}
.tarjeta-promesa svg { width: 20px; height: 20px; color: var(--cyan-400); margin-bottom: 8px; }
.tarjeta-promesa strong { display: block; font-size: 12.5px; margin-bottom: 3px; }
.tarjeta-promesa span { font-size: 11.5px; color: rgba(255,255,255,.55); line-height: 1.45; }

/* ============================ BARRA SUPERIOR ============================ */

.barra {
  height: 70px;
  background: rgba(255, 255, 255, .6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, .8);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 26px;
  position: sticky;
  top: 0;
  z-index: 30;
}

.menu-movil { display: none; padding: 8px; border-radius: var(--radio-sm); color: var(--texto-medio); }
.menu-movil svg { width: 20px; height: 20px; display: block; }

.buscador { position: relative; flex: 1; max-width: 420px; }
.buscador svg {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--texto-suave); pointer-events: none;
}
.buscador input {
  width: 100%;
  padding: 10px 14px 10px 38px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  font-size: 13.5px;
}
.buscador input::placeholder { color: var(--texto-suave); }
.buscador input:focus { outline: none; border-color: var(--cyan-500); background: #fff; }

.barra-derecha { margin-left: auto; display: flex; align-items: center; gap: 14px; }

.campana { position: relative; padding: 8px; border-radius: var(--radio-sm); color: var(--texto-medio); }
.campana:hover { background: var(--fondo); }
.campana svg { width: 19px; height: 19px; display: block; }
.campana[data-pendientes]::after {
  content: attr(data-pendientes);
  position: absolute; top: 1px; right: 1px;
  min-width: 14px; height: 14px; padding: 0 3px;
  background: var(--error); color: #fff;
  font-size: 9px; font-weight: 700; line-height: 1;
  border-radius: 999px;
  display: grid; place-items: center;
  border: 2px solid var(--card);
}

.usuario { display: flex; align-items: center; gap: 10px; padding: 4px 6px 4px 4px; border-radius: 999px; }
.usuario:hover { background: var(--fondo); }
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(140deg, var(--navy-700), var(--navy-900)); color: #fff;
  display: grid; place-items: center;
  font-size: 12.5px; font-weight: 700; flex-shrink: 0;
}
.usuario-datos { text-align: left; line-height: 1.25; }
.usuario-datos strong { display: block; font-size: 13px; font-weight: 600; }
.usuario-datos span { font-size: 11.5px; color: var(--texto-suave); }

/* ============================ CONTENIDO ============================ */

.contenido { padding: 26px; flex: 1; }

.encabezado { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.encabezado h1 { font-size: 27px; font-weight: 700; letter-spacing: -.022em; line-height: 1.2; }
.encabezado p { color: var(--texto-medio); margin-top: 4px; font-size: 13.5px; }
.encabezado-acciones { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

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

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 17px;
  border-radius: var(--radio-sm);
  font-size: 13.5px; font-weight: 600;
  transition: background .15s, border-color .15s, transform .1s;
}
.btn svg { width: 16px; height: 16px; }
.btn:active { transform: translateY(1px); }
.btn-primario {
  background: linear-gradient(135deg, var(--cyan-400), var(--cyan-500));
  color: #063049;
  box-shadow: 0 4px 14px rgba(53, 196, 220, .34);
}
.btn-primario:hover {
  background: linear-gradient(135deg, var(--cyan-500), var(--cyan-600));
  box-shadow: 0 6px 18px rgba(31, 166, 193, .38);
}
.btn-neutro {
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(10px);
  color: var(--texto);
  border: 1px solid var(--borde-fuerte);
}
.btn-neutro:hover { background: #fff; border-color: var(--cyan-500); color: var(--navy-800); }
.btn-grande { width: 100%; justify-content: center; padding: 16px; font-size: 15.5px; border-radius: var(--radio); }

/* ============================ TARJETAS ============================ */

.tarjeta {
  background: var(--card);
  /* El desenfoque es lo que da el efecto de vidrio: deja ver el fondo
     difuminado por detrás sin que estorbe la lectura. */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.tarjeta-cabeza {
  padding: 18px 20px;
  border-bottom: 1px solid rgba(11,61,102,.1);
  display: flex; align-items: center; gap: 12px;
}
.tarjeta-cabeza h2 { font-size: 15.5px; font-weight: 650; letter-spacing: -.01em; }
.tarjeta-cabeza .enlace { margin-left: auto; font-size: 13px; color: var(--cyan-600); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.tarjeta-cuerpo { padding: 20px; }

/* Métricas del dashboard */
.rejilla-metricas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.metrica {
  background: var(--card);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 20px;
  box-shadow: var(--sombra);
  transition: transform .18s, box-shadow .18s;
}
.metrica:hover { transform: translateY(-2px); box-shadow: var(--sombra-md); }
.metrica-icono {
  width: 42px; height: 42px; border-radius: 11px;
  display: grid; place-items: center; margin-bottom: 13px;
}
.metrica-icono svg { width: 20px; height: 20px; }
.metrica-etiqueta { font-size: 12.5px; color: var(--texto-medio); font-weight: 500; }
.metrica-valor { font-size: 29px; font-weight: 700; letter-spacing: -.03em; margin: 3px 0 6px; line-height: 1.1; }
.metrica-delta { font-size: 11.5px; color: var(--texto-suave); display: flex; align-items: center; gap: 5px; }
.metrica-delta b { font-weight: 650; }
.delta-sube b { color: var(--ok); }
.delta-baja b { color: var(--error); }

.tinte-teal  { background: var(--cyan-100); color: #0E7F97; }
.tinte-verde { background: var(--ok-bg); color: var(--ok); }
.tinte-ambar { background: var(--alerta-bg); color: var(--alerta); }
.tinte-rojo  { background: var(--error-bg); color: var(--error); }
.tinte-azul  { background: var(--info-bg); color: var(--info); }

.dos-columnas { display: grid; grid-template-columns: 1.15fr .85fr; gap: 20px; align-items: start; }

/* ============================ TABLAS ============================ */

.tabla-envoltura { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-suave);
  font-weight: 650;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(11,61,102,.1);
  white-space: nowrap;
  background: rgba(255,255,255,.45);
}
tbody td { padding: 14px 16px; border-bottom: 1px solid rgba(11,61,102,.08); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background .12s; }
tbody tr:hover { background: rgba(255,255,255,.55); }

.celda-persona { display: flex; align-items: center; gap: 11px; }
.celda-persona strong { display: block; font-size: 13.5px; font-weight: 600; color: var(--texto); }
.celda-persona span span { display: block; font-size: 11.5px; color: var(--texto-suave); }

.celda-mascota { display: flex; align-items: center; gap: 11px; }
.foto-mascota {
  width: 40px; height: 40px; border-radius: 9px;
  background: #EDF1F5; color: var(--navy-700);
  display: grid; place-items: center; flex-shrink: 0;
  object-fit: cover;
}
.foto-mascota svg { width: 20px; height: 20px; opacity: .55; }

.insignia {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  white-space: nowrap;
}
.insignia::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.insignia-ok { background: var(--ok-bg); color: var(--ok); }
.insignia-alerta { background: var(--alerta-bg); color: var(--alerta); }
.insignia-error { background: var(--error-bg); color: var(--error); }
.insignia-neutra { background: #EEF1F5; color: var(--texto-medio); }
.insignia-plana::before { display: none; }

.riesgo { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.riesgo-letra {
  width: 26px; height: 26px; border-radius: 7px;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700;
}
.riesgo-texto { font-size: 10.5px; font-weight: 600; }

.acciones-fila { display: flex; gap: 6px; }
.accion-icono {
  width: 31px; height: 31px; border-radius: 7px;
  border: 1px solid var(--borde-fuerte);
  display: grid; place-items: center;
  color: var(--texto-medio);
  transition: background .12s, color .12s;
}
.accion-icono svg { width: 15px; height: 15px; }
.accion-icono:hover { background: var(--fondo); color: var(--texto); }

.pie-tabla {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 15px 20px;
  border-top: 1px solid rgba(11,61,102,.1);
  font-size: 12.5px; color: var(--texto-medio);
}
.paginacion { margin-left: auto; display: flex; gap: 5px; }
.pagina {
  min-width: 31px; height: 31px; padding: 0 8px;
  border-radius: 7px; border: 1px solid var(--borde-fuerte);
  display: grid; place-items: center;
  font-size: 12.5px; font-weight: 600; color: var(--texto-medio);
}
.pagina:hover { background: var(--fondo); }
.pagina.activa { background: var(--cyan-500); border-color: var(--cyan-500); color: #063049; }
.pagina svg { width: 14px; height: 14px; }

/* ============================ FORMULARIO ============================ */

.rejilla-formulario { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }

.seccion-titulo { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; }
.seccion-icono { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; }
.seccion-icono svg { width: 17px; height: 17px; }
.seccion-titulo h2 { font-size: 15.5px; font-weight: 650; }

.campo { margin-bottom: 15px; }
.campo:last-child { margin-bottom: 0; }
.campo label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; color: var(--texto); }
.campo-entrada { position: relative; }
.campo-entrada > svg {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--texto-suave); pointer-events: none;
}
.campo input, .campo select {
  width: 100%;
  padding: 10px 13px 10px 39px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-sm);
  background: var(--card);
  font-size: 13.5px;
}
.campo select {
  appearance: none; cursor: pointer;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A8B9A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 15px;
}
.campo input::placeholder { color: var(--texto-suave); }
.campo input:focus, .campo select:focus {
  outline: none; border-color: var(--cyan-500);
  box-shadow: 0 0 0 3px rgba(53,196,220,.2);
}
.campo-nota { font-size: 11.5px; color: var(--texto-suave); margin-top: 5px; }

.zona-foto {
  border: 1.5px dashed var(--borde-fuerte);
  border-radius: var(--radio);
  padding: 20px;
  display: flex; align-items: center; gap: 16px;
  background: #FBFCFD;
  transition: border-color .15s, background .15s;
}
.zona-foto:hover { border-color: var(--cyan-500); background: rgba(216,243,249,.55); }
.zona-foto-texto { flex: 1; }
.zona-foto-texto strong { display: block; font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.zona-foto-texto span { font-size: 11.5px; color: var(--texto-suave); }
.zona-foto-previa {
  width: 62px; height: 62px; border-radius: 10px;
  background: #EDF1F5; display: grid; place-items: center; flex-shrink: 0;
  overflow: hidden;
}
.zona-foto-previa svg { width: 24px; height: 24px; color: var(--texto-suave); }
.zona-foto-previa img { width: 100%; height: 100%; object-fit: cover; }

/* Planes */
.rejilla-planes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; }
.plan {
  background: var(--card);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1.5px solid var(--borde);
  border-radius: var(--radio);
  padding: 20px;
  position: relative;
  text-align: left;
  transition: border-color .15s, box-shadow .15s, transform .15s;
  display: flex; flex-direction: column;
}
.plan:hover { border-color: var(--cyan-500); transform: translateY(-2px); box-shadow: var(--sombra-md); }
.plan.elegido { border-color: var(--cyan-600); box-shadow: 0 0 0 3px rgba(53,196,220,.22); }
.plan-destacado { border-color: var(--cyan-500); }
.plan-cinta {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--cyan-500); color: #063049;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  padding: 4px 13px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap;
}
.plan-cinta svg { width: 11px; height: 11px; }
.plan-cabeza { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.plan-cabeza svg { width: 18px; height: 18px; color: var(--cyan-600); }
.plan-cabeza h3 { font-size: 16px; font-weight: 650; }
.plan-precio { font-size: 25px; font-weight: 700; letter-spacing: -.03em; margin-bottom: 15px; }
.plan-precio span { font-size: 12.5px; font-weight: 500; color: var(--texto-suave); letter-spacing: 0; }
.plan-lista { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.plan-lista li { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--texto-medio); }
.plan-lista svg { width: 14px; height: 14px; color: var(--ok); flex-shrink: 0; margin-top: 2px; }
.plan-lista li.no-incluido { color: var(--texto-suave); }
.plan-lista li.no-incluido svg { color: var(--borde-fuerte); }

/* ============================ GRÁFICAS ============================ */

.grafica { margin-bottom: 22px; }
.grafica:last-child { margin-bottom: 0; }
.grafica-cabeza { margin-bottom: 10px; }
.grafica-titulo { font-size: 12.5px; color: var(--texto-medio); font-weight: 500; }
.grafica-valor { font-size: 21px; font-weight: 700; letter-spacing: -.025em; display: flex; align-items: baseline; gap: 9px; }
.grafica-valor small { font-size: 11.5px; font-weight: 600; color: var(--ok); letter-spacing: 0; }
.grafica svg { width: 100%; height: auto; display: block; }
.eje-etiqueta { font-size: 9px; fill: var(--texto-suave); }

/* Actividad */
.actividad-tipo {
  display: inline-flex; padding: 4px 10px; border-radius: 6px;
  font-size: 11.5px; font-weight: 600;
}

/* Acciones rápidas */
.rejilla-acciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 12px; }
.accion-rapida {
  display: flex; align-items: center; gap: 10px;
  padding: 14px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  background: var(--card);
  font-size: 13px; font-weight: 600;
  transition: border-color .15s, background .15s, transform .15s;
}
.accion-rapida svg { width: 17px; height: 17px; color: var(--cyan-600); flex-shrink: 0; }
.accion-rapida:hover { border-color: var(--cyan-500); background: rgba(216,243,249,.55); transform: translateY(-1px); }

/* ============================ ACCESO ============================ */

/* ======================== PANTALLA DE ACCESO ========================
   Tarjeta partida en dos: a la izquierda se entra, a la derecha la marca.

   Todo va colgado de .acceso a proposito. Las clases .campo y
   .campo-entrada se usan en los 39 formularios del panel: si se
   redefinieran sueltas, este rediseno se llevaria por delante toda la
   aplicacion. Aqui solo cambian DENTRO de esta pantalla.

   La columna derecha no lleva foto de archivo: lleva el degradado de la
   marca y el escudo. Se ve mejor que un paisaje cualquiera, no depende de
   que haya internet, y no hay una imagen de 500 KB que cargar antes de
   poder entrar. */

.acceso {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: 24px;
  background: transparent;   /* deja ver las huellas del body */
}

.acceso-tarjeta {
  width: 100%; max-width: 940px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--card-solida);
  border-radius: 26px;
  overflow: hidden;                       /* recorta el degradado a la curva */
  box-shadow: 0 32px 80px rgba(5, 46, 86, .20),
              0 4px 14px rgba(5, 46, 86, .06);
  animation: acceso-entra .55s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes acceso-entra {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* -------------------------- Columna izquierda -------------------------- */
.acceso-izq {
  background: #fff;
  padding: 52px 48px;
  display: flex; flex-direction: column; justify-content: center;
}
.acceso-logo { display: block; width: 116px; margin-bottom: 26px; }
.acceso-izq h1 {
  font-size: 30px; font-weight: 700; letter-spacing: -.025em;
  color: var(--texto); margin-bottom: 6px; line-height: 1.15;
}
.acceso-izq > p {
  color: var(--texto-suave); font-size: 13.5px; margin-bottom: 26px;
}

.acceso-error {
  background: var(--error-bg); color: var(--error);
  border: 1px solid rgba(220, 38, 38, .22);
  padding: 11px 14px; border-radius: 12px;
  font-size: 12.5px; margin-bottom: 18px;
  animation: acceso-tiembla .4s ease both;
}
@keyframes acceso-tiembla {
  0%, 100% { transform: none; }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.acceso .campo { margin-bottom: 15px; }
.acceso .campo label {
  display: block; font-size: 12.5px; font-weight: 600;
  color: var(--texto-medio); margin-bottom: 7px;
}
/* Sin borde marcado: un fondo gris muy suave que se vuelve blanco al
   escribir. El borde aparece solo al enfocar, y ahi si es nitido. */
.acceso .campo-entrada {
  display: flex; align-items: center; gap: 10px;
  background: #F2F5F8;
  border: 1.5px solid transparent;
  border-radius: 13px;
  padding: 0 15px;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.acceso .campo-entrada svg {
  /* En el resto del panel el icono va en posicion absoluta y el campo
     lleva un hueco a la izquierda. Aqui la caja es flex, asi que el icono
     tiene que volver al flujo normal: si se queda absoluto, flota encima
     del texto y se come las primeras letras. */
  position: static; transform: none;
  width: 17px; height: 17px; flex-shrink: 0;
  color: var(--texto-suave);
  transition: color .2s ease;
}
.acceso .campo-entrada input {
  /* min-width:0 no es opcional. Un <input> trae un ancho natural propio,
     y dentro de un flex no se encoge por debajo de el: se montaba encima
     del icono y se comia las primeras letras del marcador ("tu@..." se
     leia "@..."). */
  flex: 1; min-width: 0;
  background: none; border: 0; outline: 0;
  padding: 14px 0;
  font-size: 14.5px; color: var(--texto);
}
.acceso .campo-entrada input::placeholder { color: #9AAEBF; }
.acceso .campo-entrada:focus-within {
  background: #fff;
  border-color: var(--texto);
  box-shadow: 0 0 0 4px rgba(15, 52, 80, .07);
}
.acceso .campo-entrada:focus-within svg { color: var(--texto); }

/* La pildora. Negra de verdad, pero con el azul de la marca dentro, para
   que no parezca de otra aplicacion. */
.acceso-entrar {
  width: 100%;
  margin-top: 8px;
  padding: 15px 20px;
  background: #0B2138;
  color: #fff;
  border: 0; border-radius: 999px;
  font-size: 13px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.acceso-entrar:hover:not(:disabled) {
  background: #16354F;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(11, 33, 56, .28);
}
.acceso-entrar:active:not(:disabled) { transform: translateY(0); }
.acceso-entrar:disabled { opacity: .6; cursor: default; letter-spacing: .04em; }

.acceso-pie {
  margin-top: 22px;
  font-size: 12px; color: var(--texto-suave); text-align: center;
}

/* -------------------------- Columna derecha -------------------------- */
.acceso-der {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 52px 44px;
  text-align: center;
  color: #fff;
  overflow: hidden;
  /* Degradado de la marca: el azul del escudo, aclarado hacia el cian */
  background: linear-gradient(150deg, #0A3C6B 0%, #052E56 45%, #041F3C 100%);
}
/* Dos resplandores suaves: uno cian y otro naranja, los dos del logo.
   Dan profundidad sin robarle contraste al texto. */
.acceso-der::before {
  content: '';
  position: absolute; inset: -30% -20% auto -30%;
  height: 90%;
  background: radial-gradient(60% 60% at 30% 30%, rgba(53, 196, 220, .30), transparent 70%),
              radial-gradient(45% 45% at 85% 15%, rgba(230, 145, 65, .22), transparent 70%);
  pointer-events: none;
}
/* La capa oscura que pide el diseno: asegura el contraste del texto pase
   lo que pase con el degradado. */
.acceso-der::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(2, 18, 35, .18), rgba(2, 18, 35, .42));
  pointer-events: none;
}
.acceso-der > * { position: relative; z-index: 1; }

.acceso-escudo {
  width: 84px; margin-bottom: 22px;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .35));
  animation: acceso-flota 6s ease-in-out infinite;
}
@keyframes acceso-flota {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
.acceso-der h2 {
  font-size: 31px; font-weight: 700; letter-spacing: -.02em;
  line-height: 1.15; margin-bottom: 10px;
}
.acceso-der p {
  font-size: 13.5px; line-height: 1.65;
  color: rgba(255, 255, 255, .82);
  max-width: 290px; margin: 0 auto 26px;
}
.acceso-der-nota {
  font-size: 11.5px; line-height: 1.55;
  color: rgba(255, 255, 255, .62);
  max-width: 280px; margin: 20px auto 0;
}

.acceso-separador {
  display: flex; align-items: center; gap: 12px;
  width: 100%; max-width: 280px; margin: 0 auto 18px;
  color: rgba(255, 255, 255, .55);
  font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
}
.acceso-separador::before, .acceso-separador::after {
  content: ''; flex: 1; height: 1px;
  background: rgba(255, 255, 255, .22);
}

#botonGoogle { display: flex; justify-content: center; min-height: 44px; }

/* ------------------------------ Telefono ------------------------------ */
@media (max-width: 860px) {
  .acceso { padding: 0; align-items: stretch; }
  .acceso-tarjeta {
    grid-template-columns: 1fr;
    max-width: 480px; margin: auto;
    border-radius: 22px;
  }
  /* La marca queda arriba, como cabecera, y el formulario debajo: es lo
     que se busca al abrir, asi que va donde cae el pulgar. */
  .acceso-der { order: -1; padding: 34px 28px 30px; }
  .acceso-escudo { width: 60px; margin-bottom: 14px; animation: none; }
  .acceso-der h2 { font-size: 24px; }
  .acceso-der p { margin-bottom: 20px; font-size: 13px; }
  .acceso-izq { padding: 32px 26px 36px; }
  .acceso-izq h1 { font-size: 25px; }
  .acceso-logo { display: none; }   /* ya esta el escudo arriba */
}

@media (max-width: 380px) {
  .acceso-izq { padding: 26px 20px 30px; }
  .acceso-der { padding: 28px 20px 26px; }
}

/* A quien prefiera menos movimiento, se le quita. */
@media (prefers-reduced-motion: reduce) {
  .acceso-tarjeta, .acceso-escudo, .acceso-error { animation: none; }
  .acceso-entrar { transition: background .2s ease; }
  .acceso-entrar:hover:not(:disabled) { transform: none; box-shadow: none; }
}

.aviso-demo {
  background: var(--alerta-bg); color: var(--alerta-texto);
  border: 1px solid var(--alerta-borde);
  border-radius: var(--radio-sm);
  padding: 10px 14px;
  font-size: 12.5px;
  margin-bottom: 18px;
  display: flex; align-items: center; gap: 9px;
}
.aviso-demo svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ============================ ESTADO VACÍO ============================ */

.vacio { padding: 54px 20px; text-align: center; color: var(--texto-medio); }
.vacio svg { width: 38px; height: 38px; color: var(--borde-fuerte); margin-bottom: 12px; }
.vacio strong { display: block; font-size: 14.5px; color: var(--texto); margin-bottom: 4px; }
.vacio p { font-size: 13px; }

/* ============================ RESPONSIVE ============================ */

.velo { display: none; }

@media (max-width: 1080px) {
  .dos-columnas { grid-template-columns: 1fr; }
  .rejilla-planes { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.abierto { transform: translateX(0); }
  .principal { margin-left: 0; }
  .menu-movil { display: grid; place-items: center; }
  .rejilla-formulario { grid-template-columns: 1fr; }
  .contenido { padding: 18px; }
  .encabezado h1 { font-size: 23px; }
  .usuario-datos { display: none; }
  .velo.visible {
    display: block; position: fixed; inset: 0;
    background: rgba(7,36,57,.45); z-index: 35;
  }
}

@media (max-width: 560px) {
  .buscador { max-width: none; }
  .encabezado-acciones { width: 100%; }
  .encabezado-acciones .btn { flex: 1; justify-content: center; }
}

/* Barra gris que ocupa el lugar del dato mientras carga */
.cargando-barra {
  display: block;
  height: 11px;
  width: 100%;
  max-width: 150px;
  border-radius: 999px;
  background: linear-gradient(90deg, #EDF1F5 25%, #F6F8FA 50%, #EDF1F5 75%);
  background-size: 240% 100%;
  animation: brillo 1.3s ease-in-out infinite;
}
@keyframes brillo {
  0% { background-position: 200% 0; }
  100% { background-position: -40% 0; }
}


/* Con el menú completo, en pantallas bajas la tarjeta del pie empujaba
   los últimos ítems fuera de la vista. Navegar siempre gana sobre lo
   decorativo. */
@media (max-height: 1000px) {
  .sidebar-pie { display: none; }
}


/* ══════════ Capa de detalle ══════════ */
.capa-fondo {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: 24px;
  background: rgba(5, 46, 86, .42);
  backdrop-filter: blur(3px);
  animation: aparecer .16s ease;
}
@keyframes aparecer { from { opacity: 0 } to { opacity: 1 } }

.capa-caja {
  width: 100%; max-width: 480px;
  max-height: 82vh;
  display: flex; flex-direction: column;
  background: #fff;
  border-radius: var(--radio);
  box-shadow: 0 24px 60px rgba(5, 46, 86, .3);
  overflow: hidden;
}
.capa-cabeza {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(11, 61, 102, .1);
}
.capa-cabeza h2 { font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
/* El cuerpo se desplaza solo: un registro con muchos campos no rompe la caja */
.capa-cuerpo { padding: 6px 20px 20px; overflow-y: auto; }


/* Los iconos dentro de la capa toman el tamaño de su contenedor si no se
   les fija uno: sin esto una flecha ocupa media pantalla. */
.capa-cuerpo svg { width: 16px; height: 16px; flex-shrink: 0; }


/* Una burbuja que abre una ficha debe verse pulsable, o nadie la pulsa */
.celda-pulsable { border-radius: 10px; margin: -4px -7px; padding: 4px 7px; transition: background .15s; }
.celda-pulsable:hover { background: rgba(53, 196, 220, .12); }
.celda-pulsable:hover .avatar { box-shadow: 0 0 0 3px rgba(53, 196, 220, .25); }
.celda-pulsable:focus-visible { outline: 2px solid var(--cyan-500); outline-offset: 1px; }


/* El de eliminar se ve distinto: no debe pulsarse por error */
.accion-peligro:hover { background: var(--error-bg); border-color: var(--error-borde); color: var(--error); }

/* =====================================================================
   REDISENO DEL PANEL
   =====================================================================
   Este bloque va al FINAL del archivo a proposito. Repite selectores que
   ya existen arriba, y en CSS gana el ultimo: asi el rediseno queda en un
   solo sitio, se lee de corrido, y para volver atras basta con borrarlo.

   Todo es CSS. No se toco una sola linea de HTML ni de JavaScript, asi
   que nada de lo que funciona se puede romper: cambia como se ve, no lo
   que hace.

   Las cuatro ideas:
   1. PROFUNDIDAD. Antes todo estaba al mismo nivel. Ahora hay capas: el
      fondo, las tarjetas, y lo que se levanta al pasar el mouse.
   2. JERARQUIA. Los numeros importantes se leen antes que sus etiquetas.
   3. RESPUESTA. Cada cosa que se puede tocar reacciona al tocarla.
   4. CALMA. Nada parpadea ni salta. Es una herramienta de trabajo.
   ===================================================================== */

:root {
  /* Escala de sombras: cada nivel es "un paso mas arriba" del fondo.
     Antes habia dos sombras sueltas y todo se veia igual de plano. */
  --s1: 0 1px 2px rgba(10, 60, 107, .05), 0 2px 8px rgba(10, 60, 107, .05);
  --s2: 0 2px 5px rgba(10, 60, 107, .06), 0 8px 22px rgba(10, 60, 107, .08);
  --s3: 0 6px 14px rgba(10, 60, 107, .08), 0 18px 44px rgba(10, 60, 107, .13);
  --curva: cubic-bezier(.22, 1, .36, 1);   /* arranca rapido, frena suave */
}

/* Un aro visible SOLO para quien navega con el teclado. Con el mouse no
   aparece. Antes no habia ninguno: quien usa tabulador no sabia donde
   estaba parado. */
:is(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--cyan-500);
  outline-offset: 2px;
  /* Sin border-radius aqui: eso cambiaria la FORMA del elemento, y un
     boton redondo se cuadraria al enfocarlo con el teclado. El contorno
     ya sigue la curva que tenga cada uno. */
}

/* ---------------------------- SIDEBAR ---------------------------- */

.sidebar {
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(53, 196, 220, .13), transparent 60%),
    linear-gradient(178deg, #073558 0%, #04264A 100%);
  background-color: #052E56;
  box-shadow: 6px 0 30px rgba(4, 30, 58, .22);
}

.marca {
  padding: 22px 18px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  margin-bottom: 8px;
}
.marca img { transition: transform .5s var(--curva); }
.marca:hover img { transform: rotate(-6deg) scale(1.06); }

.nav-item {
  position: relative;
  padding: 9px 12px;
  margin-bottom: 2px;
  transition: background .18s var(--curva), color .18s, padding-left .18s var(--curva);
}
/* La barrita de la izquierda: marca donde estas sin gritar. */
.nav-item::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  width: 3px; height: 0;
  background: var(--cyan-400);
  border-radius: 0 3px 3px 0;
  transform: translateY(-50%);
  transition: height .22s var(--curva);
}
.nav-item:hover { background: rgba(255, 255, 255, .07); padding-left: 15px; }
.nav-item:hover::before { height: 16px; }
.nav-item svg { transition: transform .18s var(--curva); }
.nav-item:hover svg { transform: scale(1.1); }

.nav-item.activo {
  background: linear-gradient(100deg, var(--cyan-500), #2AB6D0);
  color: #04283F;
  box-shadow: 0 5px 16px rgba(53, 196, 220, .34), inset 0 1px 0 rgba(255, 255, 255, .3);
  padding-left: 12px;
}
.nav-item.activo::before { height: 0; }

.nav-grupo {
  margin-top: 12px;
  padding: 10px 12px 5px;
  border-top: 1px solid rgba(255, 255, 255, .06);
}

.tarjeta-promesa {
  background: linear-gradient(150deg, rgba(53, 196, 220, .12), rgba(255, 255, 255, .04));
  border-color: rgba(255, 255, 255, .12);
}

/* ------------------------- BARRA SUPERIOR ------------------------- */

.barra {
  background: rgba(255, 255, 255, .72);
  border-bottom: 1px solid rgba(11, 61, 102, .07);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}

/* El buscador se comporta igual que los campos del acceso: gris suave en
   reposo, blanco con aro al escribir. Una sola idea en toda la app. */
.buscador input {
  padding: 11px 16px 11px 40px;
  background: rgba(237, 242, 247, .9);
  border: 1.5px solid transparent;
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.buscador input:focus {
  background: #fff;
  border-color: var(--cyan-500);
  box-shadow: 0 0 0 4px rgba(53, 196, 220, .16);
}
.buscador svg { transition: color .2s; }
.buscador:focus-within svg { color: var(--cyan-600); }

.campana, .usuario { transition: background .18s, transform .18s var(--curva); }
.campana:hover { background: rgba(53, 196, 220, .12); }
.usuario:hover { background: rgba(11, 61, 102, .06); }
.avatar {
  box-shadow: 0 3px 10px rgba(5, 46, 86, .28), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: transform .22s var(--curva);
}
.usuario:hover .avatar { transform: scale(1.06); }

/* ---------------------------- TARJETAS ---------------------------- */

.tarjeta {
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: var(--s1);
  transition: box-shadow .28s var(--curva), transform .28s var(--curva);
}
.tarjeta:hover { box-shadow: var(--s2); }

.tarjeta-cabeza {
  border-bottom: 1px solid rgba(11, 61, 102, .08);
  background: linear-gradient(180deg, rgba(255, 255, 255, .5), transparent);
}
.tarjeta-cabeza .enlace { transition: gap .2s var(--curva), color .2s; }
.tarjeta-cabeza .enlace:hover { gap: 9px; color: var(--navy-700); }

/* --------------------------- METRICAS --------------------------- */
/* Es lo primero que se ve al entrar, asi que es donde mas se nota. */

.metrica {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: var(--s1);
  transition: transform .3s var(--curva), box-shadow .3s var(--curva);
}
/* Una linea de color arriba, del mismo tono que su icono. En reposo es
   fina; al pasar el mouse crece. Da un toque de color sin ensuciar. */
.metrica::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--cyan-500);
  opacity: .85;
  transition: height .3s var(--curva), opacity .3s;
}
.metrica:has(.tinte-verde)::before { background: var(--ok); }
.metrica:has(.tinte-ambar)::before { background: var(--alerta); }
.metrica:has(.tinte-rojo)::before  { background: var(--error); }
.metrica:has(.tinte-azul)::before  { background: var(--info); }

.metrica:hover {
  transform: translateY(-4px);
  box-shadow: var(--s3);
}
.metrica:hover::before { height: 5px; opacity: 1; }

.metrica-icono {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
  transition: transform .3s var(--curva);
}
.metrica:hover .metrica-icono { transform: scale(1.08) rotate(-4deg); }

.metrica-etiqueta {
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--texto-suave);
}
/* Cifras tabulares: al actualizarse, los numeros no bailan de ancho. */
.metrica-valor {
  font-size: 32px; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  margin: 6px 0 5px;
}

/* Las tarjetas entran escalonadas, de izquierda a derecha. Medio segundo
   en total: se nota que la pantalla "llego", no que esta lenta. */
.rejilla-metricas .metrica { animation: sube .5s var(--curva) both; }
.rejilla-metricas .metrica:nth-child(1) { animation-delay: .03s; }
.rejilla-metricas .metrica:nth-child(2) { animation-delay: .09s; }
.rejilla-metricas .metrica:nth-child(3) { animation-delay: .15s; }
.rejilla-metricas .metrica:nth-child(4) { animation-delay: .21s; }
@keyframes sube {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ----------------------------- TABLAS ----------------------------- */

thead th {
  background: rgba(246, 249, 252, .95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 2;   /* la cabecera no se pierde al bajar */
  border-bottom: 1px solid rgba(11, 61, 102, .12);
}

tbody tr { position: relative; transition: background .16s, box-shadow .16s; }
tbody tr:hover {
  background: rgba(53, 196, 220, .055);
  box-shadow: inset 3px 0 0 var(--cyan-500);
}

.foto-mascota { transition: transform .22s var(--curva), background .22s; }
tbody tr:hover .foto-mascota { transform: scale(1.06); background: var(--cyan-100); }

.insignia { box-shadow: inset 0 0 0 1px rgba(11, 61, 102, .06); }
.riesgo-letra { box-shadow: inset 0 0 0 1px rgba(11, 61, 102, .08); }

/* Los botones de accion se ven apagados hasta que el mouse entra en la
   fila. Asi una tabla larga no parece un tablero de mandos. */
.acciones-fila .accion-icono {
  opacity: .55;
  transition: opacity .18s, background .18s, color .18s, transform .18s var(--curva);
}
tbody tr:hover .acciones-fila .accion-icono { opacity: 1; }
.acciones-fila .accion-icono:hover { transform: translateY(-1px); }

/* ---------------------------- BOTONES ---------------------------- */

.btn { transition: background .22s, box-shadow .22s var(--curva), transform .22s var(--curva); }
.btn-primario {
  box-shadow: 0 4px 14px rgba(53, 196, 220, .3);
}
.btn-primario:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(53, 196, 220, .42);
}
.btn-primario:active { transform: translateY(0); }
.btn-neutro:hover { transform: translateY(-1px); box-shadow: var(--s1); }

/* --------------------------- FORMULARIOS --------------------------- */
/* Los campos del panel se comportan como los del acceso: mismo idioma. */

.campo input, .campo select, .campo textarea {
  border: 1.5px solid rgba(11, 61, 102, .12);
  background: rgba(247, 250, 252, .8);
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--cyan-500);
  box-shadow: 0 0 0 4px rgba(53, 196, 220, .15);
}
.campo-entrada:focus-within > svg { color: var(--cyan-600); }

/* --------------------------- CONTENIDO --------------------------- */

/* Al cambiar de pantalla, lo nuevo entra en vez de aparecer de golpe. */
.contenido > * { animation: entra .32s var(--curva) both; }
@keyframes entra {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}

.encabezado h1 { letter-spacing: -.028em; }
.encabezado { margin-bottom: 24px; }

/* --------------------------- MOVIMIENTO --------------------------- */
/* A quien haya pedido menos movimiento en su sistema, se le respeta:
   se queda todo el diseno, sin animaciones. */
@media (prefers-reduced-motion: reduce) {
  .contenido > *, .rejilla-metricas .metrica { animation: none; }
  .metrica:hover, .btn-primario:hover, .btn-neutro:hover,
  .acciones-fila .accion-icono:hover { transform: none; }
  .metrica:hover .metrica-icono, .usuario:hover .avatar,
  .marca:hover img, .nav-item:hover svg,
  tbody tr:hover .foto-mascota { transform: none; }
  .nav-item:hover { padding-left: 12px; }
}

/* =====================================================================
   REDISENO DEL PANEL - SEGUNDA PARTE
   =====================================================================
   La primera parte fue el aspecto: profundidad, jerarquia y respuesta.
   Esta es la que no se ve en una captura de pantalla pero se nota
   usando: imprimir, leer una tabla larga, no perder el sitio.
   ===================================================================== */

/* ------------------------- LEGIBILIDAD -------------------------
   Las huellas del fondo se veian A TRAVES de las tarjetas, porque son
   translucidas. En una pantalla suelta queda bonito; encima de una tabla
   de 50 filas con cedulas y fechas, cansa la vista.

   Las tarjetas que llevan DATOS se vuelven casi opacas. Las demas
   conservan el efecto de vidrio. El adorno cede ante la lectura. */

.tarjeta:has(table), .tarjeta:has(.vacio) { background: rgba(255, 255, 255, .97); }
.metrica { background: rgba(255, 255, 255, .95); }

/* ------------------------- DESPLAZAMIENTO -------------------------
   La barra del navegador es gris y ancha. Esta se ve de la casa, y solo
   aparece cuando hace falta. */

* { scrollbar-width: thin; scrollbar-color: rgba(11, 61, 102, .22) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(11, 61, 102, .18);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(11, 61, 102, .32); background-clip: content-box; }

/* Al seleccionar texto, el color de la marca en vez del azul del sistema. */
::selection { background: rgba(53, 196, 220, .3); color: var(--texto); }

/* --------------------------- ESTADO VACIO ---------------------------
   Antes era un icono gris y dos lineas. Una pantalla vacia es lo primero
   que ve alguien que empieza: que no parezca que algo fallo. */

.vacio { padding: 62px 24px; }
.vacio svg {
  width: 30px; height: 30px;
  color: var(--cyan-600);
  margin: 0 0 16px;
  padding: 15px;
  box-sizing: content-box;
  background: radial-gradient(circle at 50% 40%, var(--cyan-100), rgba(216, 243, 249, .35));
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(53, 196, 220, .16);
}
.vacio strong { font-size: 16px; }
.vacio p { max-width: 340px; margin: 0 auto; line-height: 1.6; }

/* --------------------------- VENTANA EMERGENTE --------------------------- */

.capa-fondo {
  background: rgba(4, 30, 58, .5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  animation: aparecer .22s ease both;
}
.capa-caja {
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 30px 70px rgba(4, 30, 58, .38), 0 2px 8px rgba(4, 30, 58, .12);
  /* Entra creciendo un poco desde abajo: se siente que "sale" del sitio
     donde se hizo clic, no que aparece de la nada. */
  animation: capa-entra .28s var(--curva) both;
}
@keyframes capa-entra {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.capa-cabeza {
  background: linear-gradient(180deg, rgba(246, 250, 253, .9), rgba(255, 255, 255, 0));
  border-bottom: 1px solid rgba(11, 61, 102, .09);
}

/* ------------------------------ GRAFICAS ------------------------------ */

.grafica svg, svg.grafica { overflow: visible; }
/* Los puntos de la linea crecen al pasar por encima: invita a leerlos. */
.grafica circle, .tarjeta svg circle { transition: r .18s var(--curva), stroke-width .18s; }
.grafica:hover circle { r: 3.4; }

/* --------------------------- BARRA SUPERIOR --------------------------- */

/* La campana late despacio cuando hay algo pendiente. Dos segundos de
   ciclo: se nota de reojo, no distrae mientras se trabaja. */
.campana[data-pendientes]::after { animation: latido 2.4s ease-in-out infinite; }
@keyframes latido {
  0%, 88%, 100% { transform: scale(1); }
  94%           { transform: scale(1.18); }
}

/* ------------------------------ INSIGNIAS ------------------------------ */

.insignia { letter-spacing: .01em; }
.insignia::before { box-shadow: 0 0 0 2px rgba(255, 255, 255, .7); }

/* --------------------------- PIE DEL SIDEBAR --------------------------- */

.tarjeta-promesa { transition: border-color .25s, background .25s; }
.tarjeta-promesa:hover {
  border-color: rgba(53, 196, 220, .3);
  background: linear-gradient(150deg, rgba(53, 196, 220, .18), rgba(255, 255, 255, .06));
}

/* =====================================================================
   IMPRIMIR
   =====================================================================
   No habia NINGUN estilo de impresion. Si alguien le daba a imprimir
   cualquier pantalla, salia el menu lateral, el buscador, los botones y
   el fondo de huellas gastando tinta, con la tabla espachurrada en lo
   que sobraba.

   Aqui la hoja sale como un documento: solo el contenido, en negro sobre
   blanco, con la tabla entera y sin cortar filas por la mitad.

   Ojo: el "Resumen de atenciones" que se le entrega al dueno NO usa esto.
   Ese abre su propia ventana con sus estilos (ver imprimirHistoria en
   app.js), porque es un documento con valor legal y no debe depender de
   como quede el panel.
   ===================================================================== */

@media print {
  /* Fuera todo lo que es de la pantalla y no del documento */
  .sidebar, .barra, .velo, .encabezado-acciones,
  .acciones-fila, .aviso-demo, .capa-fondo,
  .btn, .campana, .usuario, .buscador, .menu-movil { display: none !important; }

  /* Sin fondos ni sombras: la tinta se gasta en los datos */
  body {
    background: #fff !important;
    background-image: none !important;
    color: #000;
    font-size: 11pt;
  }
  .app { display: block; }
  .principal { margin-left: 0; }
  .contenido { padding: 0; }
  .contenido > * { animation: none !important; }

  .tarjeta, .metrica {
    background: #fff !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    border: 1px solid #999 !important;
    break-inside: avoid;
    margin-bottom: 12pt;
  }
  .metrica::before { display: none; }

  /* La cabecera de la tabla se repite en cada hoja: en un listado de tres
     paginas, saber que columna es cual no deberia obligar a volver atras. */
  thead { display: table-header-group; }
  thead th {
    position: static !important;
    background: #EEE !important;
    color: #000 !important;
    border-bottom: 1px solid #666 !important;
  }
  tbody tr { break-inside: avoid; }
  tbody td { border-bottom: 1px solid #DDD !important; }
  .tabla-envoltura { overflow: visible !important; }

  /* Las insignias de color no se leen en blanco y negro: se convierten en
     texto con borde. */
  .insignia {
    background: none !important; color: #000 !important;
    border: 1px solid #666; box-shadow: none !important;
  }
  .insignia::before { display: none !important; }

  /* La columna de Acciones se queda VACIA al esconder sus botones, y una
     columna en blanco en un documento impreso se ve descuidada. Se quita
     entera -encabezado y celdas- pero solo en las tablas que la tienen. */
  table:has(.acciones-fila) thead th:last-child,
  table:has(.acciones-fila) tbody td:has(.acciones-fila) { display: none; }

  /* Los botones de pagina no sirven en papel; el "Mostrando 5 de 5" si,
     porque dice si la hoja trae todo o es un pedazo. */
  .paginacion { display: none !important; }
  .pie-tabla {
    border-top: 1px solid #DDD;
    padding-top: 8pt; font-size: 9pt; color: #444;
  }

  .encabezado h1 { font-size: 18pt; }
  a { text-decoration: none; color: #000; }

  /* Que no quede un titulo solo al final de una hoja */
  h1, h2 { break-after: avoid; }

  @page { margin: 1.6cm; }
}

/* ------------------------------ MOVIMIENTO ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .capa-caja, .capa-fondo { animation: none; }
  .campana[data-pendientes]::after { animation: none; }
  .grafica:hover circle { r: 2.8; }
}

/* =====================================================================
   MENU DE LA CUENTA  +  TONO OSCURO
   =====================================================================
   El chip con el nombre era antes el boton de salir: un clic despistado
   y afuera. Ahora abre un menu con la apariencia y el cerrar sesion
   dentro, que es donde uno los busca.
   ===================================================================== */

.usuario-caja { position: relative; }
.usuario[aria-expanded="true"] { background: rgba(11, 61, 102, .08); }

.menu-usuario {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: 268px; z-index: 120;
  background: var(--card-solida);
  border: 1px solid var(--borde-fuerte);
  border-radius: 16px;
  box-shadow: var(--s3);
  overflow: hidden;
  animation: menu-baja .2s var(--curva) both;
}
@keyframes menu-baja {
  from { opacity: 0; transform: translateY(-8px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.menu-usuario[hidden] { display: none; }

.menu-usuario-cabeza {
  display: flex; align-items: center; gap: 11px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--borde-fuerte);
}
.menu-usuario-cabeza strong { display: block; font-size: 13.5px; font-weight: 650; }
.menu-usuario-cabeza > span > span {
  display: block; font-size: 11.5px; color: var(--texto-suave);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 175px;
}

.menu-usuario-seccion { padding: 13px 16px 14px; border-bottom: 1px solid var(--borde-fuerte); }
.menu-usuario-titulo {
  display: block; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--texto-suave); margin-bottom: 9px;
}

/* Los tres tonos, uno al lado del otro: se ve de un golpe cual esta
   puesto y cuales hay. Un interruptor de dos estados no dejaria sitio
   para "automatico". */
.tono-opciones {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  background: var(--fondo);
  padding: 4px; border-radius: 12px;
}
.tono-opcion {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 9px 4px; border-radius: 9px;
  font-size: 11px; font-weight: 600;
  color: var(--texto-medio);
  transition: background .18s, color .18s, box-shadow .18s;
}
.tono-opcion svg { width: 17px; height: 17px; }
.tono-opcion:hover { background: rgba(255, 255, 255, .55); color: var(--texto); }
.tono-opcion.activo {
  background: var(--card-solida);
  color: var(--cyan-600);
  box-shadow: var(--s1);
}
.menu-usuario-nota {
  font-size: 11px; line-height: 1.5;
  color: var(--texto-suave); margin-top: 9px;
}

.menu-usuario-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 13px 16px;
  font-size: 13.5px; font-weight: 600;
  color: var(--texto-medio);
  text-align: left;
  transition: background .18s, color .18s;
}
.menu-usuario-item svg { width: 17px; height: 17px; }
.menu-usuario-item:hover { background: var(--fondo); color: var(--texto); }
.menu-usuario-item.peligro:hover { background: var(--error-bg); color: var(--error); }


/* =====================================================================
   TONO OSCURO
   =====================================================================
   Casi todo el panel pinta con variables de color, asi que el tono
   oscuro es sobre todo volver a definirlas. Lo que no sale de una
   variable -el fondo de huellas, el logo con letras azul marino- se
   arregla aparte, abajo.

   Va escrito DOS veces a proposito:
   - [data-tono="oscuro"]  para quien lo eligio a mano.
   - @media (prefers-color-scheme: dark) SOLO si no eligio nada, para que
     el automatico siga al sistema.
   La regla :not([data-tono]) es la que evita que el sistema le pise la
   eleccion a quien pidio claro expresamente.
   ===================================================================== */

:root[data-tono="oscuro"] {
  --navy-900: #05121C;
  --navy-800: #0A1F30;
  --navy-700: #12354B;

  --fondo: #08151F;
  --card: rgba(21, 38, 51, .88);
  --card-solida: #16262F;
  /* Sobre oscuro la caja suave ACLARA un poco, no blanquea. */
  --caja-suave: rgba(255, 255, 255, .05);
  --borde: rgba(255, 255, 255, .07);
  --borde-fuerte: rgba(255, 255, 255, .13);

  --texto: #E7F0F7;
  --texto-medio: #A7BDCD;
  --texto-suave: #7B93A6;

  /* En oscuro los colores de estado se invierten: el texto va claro y el
     fondo tenue. Los mismos del modo claro se verian apagados. */
  --ok: #3DD68C;      --ok-bg: rgba(61, 214, 140, .15);
  --alerta: #F2B33D;  --alerta-bg: rgba(242, 179, 61, .15);
  --error: #F8807F;   --error-bg: rgba(248, 128, 127, .15);
  --info: #6BA6FA;    --info-bg: rgba(107, 166, 250, .15);
  /* En oscuro el texto del aviso va CLARO, y el borde tenue. */
  --ok-texto: var(--ok);         --ok-borde: rgba(61, 214, 140, .38);
  --alerta-texto: var(--alerta); --alerta-borde: rgba(242, 179, 61, .38);
  --error-texto: var(--error);   --error-borde: rgba(248, 128, 127, .38);
  --cyan-100: rgba(53, 196, 220, .16);
  --cyan-600: #4FD3E8;

  /* Sombras casi negras: en oscuro una sombra azulada se ve como niebla */
  --s1: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .22);
  --s2: 0 2px 6px rgba(0, 0, 0, .34), 0 10px 26px rgba(0, 0, 0, .3);
  --s3: 0 8px 18px rgba(0, 0, 0, .4), 0 22px 50px rgba(0, 0, 0, .45);
  --sombra: var(--s1);
  --sombra-md: var(--s2);
}

/* Lo que no sale de una variable */
:root[data-tono="oscuro"] body {
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22240%22%20height=%22260%22%20viewBox=%220%200%20240%20260%22%3E%3Cg%20fill=%22%2313293B%22%3E%3Cg%20transform=%22translate(38,34)%20rotate(-18)%20scale(1.0)%22%3E%3Cellipse%20cx=%220%22%20cy=%2213%22%20rx=%2210.5%22%20ry=%228.5%22/%3E%3Cellipse%20cx=%22-10.5%22%20cy=%22-2%22%20rx=%224.2%22%20ry=%225.8%22/%3E%3Cellipse%20cx=%22-3.5%22%20cy=%22-8.5%22%20rx=%224.2%22%20ry=%226.2%22/%3E%3Cellipse%20cx=%224.5%22%20cy=%22-7.5%22%20rx=%224.2%22%20ry=%226.2%22/%3E%3Cellipse%20cx=%2211.5%22%20cy=%22-0.5%22%20rx=%224.2%22%20ry=%225.8%22/%3E%3C/g%3E%3Cg%20transform=%22translate(128,70)%20rotate(22)%20scale(0.78)%22%3E%3Cellipse%20cx=%220%22%20cy=%2213%22%20rx=%2210.5%22%20ry=%228.5%22/%3E%3Cellipse%20cx=%22-10.5%22%20cy=%22-2%22%20rx=%224.2%22%20ry=%225.8%22/%3E%3Cellipse%20cx=%22-3.5%22%20cy=%22-8.5%22%20rx=%224.2%22%20ry=%226.2%22/%3E%3Cellipse%20cx=%224.5%22%20cy=%22-7.5%22%20rx=%224.2%22%20ry=%226.2%22/%3E%3Cellipse%20cx=%2211.5%22%20cy=%22-0.5%22%20rx=%224.2%22%20ry=%225.8%22/%3E%3C/g%3E%3Cg%20transform=%22translate(72,118)%20rotate(12)%20scale(0.62)%22%3E%3Cellipse%20cx=%220%22%20cy=%2213%22%20rx=%2210.5%22%20ry=%228.5%22/%3E%3Cellipse%20cx=%22-10.5%22%20cy=%22-2%22%20rx=%224.2%22%20ry=%225.8%22/%3E%3Cellipse%20cx=%22-3.5%22%20cy=%22-8.5%22%20rx=%224.2%22%20ry=%226.2%22/%3E%3Cellipse%20cx=%224.5%22%20cy=%22-7.5%22%20rx=%224.2%22%20ry=%226.2%22/%3E%3Cellipse%20cx=%2211.5%22%20cy=%22-0.5%22%20rx=%224.2%22%20ry=%225.8%22/%3E%3C/g%3E%3Cg%20transform=%22translate(168,150)%20rotate(-25)%20scale(0.9)%22%3E%3Cellipse%20cx=%220%22%20cy=%2213%22%20rx=%2210.5%22%20ry=%228.5%22/%3E%3Cellipse%20cx=%22-10.5%22%20cy=%22-2%22%20rx=%224.2%22%20ry=%225.8%22/%3E%3Cellipse%20cx=%22-3.5%22%20cy=%22-8.5%22%20rx=%224.2%22%20ry=%226.2%22/%3E%3Cellipse%20cx=%224.5%22%20cy=%22-7.5%22%20rx=%224.2%22%20ry=%226.2%22/%3E%3Cellipse%20cx=%2211.5%22%20cy=%22-0.5%22%20rx=%224.2%22%20ry=%225.8%22/%3E%3C/g%3E%3Cg%20transform=%22translate(14,168)%20rotate(30)%20scale(0.7)%22%3E%3Cellipse%20cx=%220%22%20cy=%2213%22%20rx=%2210.5%22%20ry=%228.5%22/%3E%3Cellipse%20cx=%22-10.5%22%20cy=%22-2%22%20rx=%224.2%22%20ry=%225.8%22/%3E%3Cellipse%20cx=%22-3.5%22%20cy=%22-8.5%22%20rx=%224.2%22%20ry=%226.2%22/%3E%3Cellipse%20cx=%224.5%22%20cy=%22-7.5%22%20rx=%224.2%22%20ry=%226.2%22/%3E%3Cellipse%20cx=%2211.5%22%20cy=%22-0.5%22%20rx=%224.2%22%20ry=%225.8%22/%3E%3C/g%3E%3Cg%20transform=%22translate(112,196)%20rotate(-8)%20scale(0.85)%22%3E%3Cellipse%20cx=%220%22%20cy=%2213%22%20rx=%2210.5%22%20ry=%228.5%22/%3E%3Cellipse%20cx=%22-10.5%22%20cy=%22-2%22%20rx=%224.2%22%20ry=%225.8%22/%3E%3Cellipse%20cx=%22-3.5%22%20cy=%22-8.5%22%20rx=%224.2%22%20ry=%226.2%22/%3E%3Cellipse%20cx=%224.5%22%20cy=%22-7.5%22%20rx=%224.2%22%20ry=%226.2%22/%3E%3Cellipse%20cx=%2211.5%22%20cy=%22-0.5%22%20rx=%224.2%22%20ry=%225.8%22/%3E%3C/g%3E%3Cg%20transform=%22translate(186,42)%20rotate(15)%20scale(0.55)%22%3E%3Cellipse%20cx=%220%22%20cy=%2213%22%20rx=%2210.5%22%20ry=%228.5%22/%3E%3Cellipse%20cx=%22-10.5%22%20cy=%22-2%22%20rx=%224.2%22%20ry=%225.8%22/%3E%3Cellipse%20cx=%22-3.5%22%20cy=%22-8.5%22%20rx=%224.2%22%20ry=%226.2%22/%3E%3Cellipse%20cx=%224.5%22%20cy=%22-7.5%22%20rx=%224.2%22%20ry=%226.2%22/%3E%3Cellipse%20cx=%2211.5%22%20cy=%22-0.5%22%20rx=%224.2%22%20ry=%225.8%22/%3E%3C/g%3E%3Cg%20transform=%22translate(56,232)%20rotate(-20)%20scale(0.6)%22%3E%3Cellipse%20cx=%220%22%20cy=%2213%22%20rx=%2210.5%22%20ry=%228.5%22/%3E%3Cellipse%20cx=%22-10.5%22%20cy=%22-2%22%20rx=%224.2%22%20ry=%225.8%22/%3E%3Cellipse%20cx=%22-3.5%22%20cy=%22-8.5%22%20rx=%224.2%22%20ry=%226.2%22/%3E%3Cellipse%20cx=%224.5%22%20cy=%22-7.5%22%20rx=%224.2%22%20ry=%226.2%22/%3E%3Cellipse%20cx=%2211.5%22%20cy=%22-0.5%22%20rx=%224.2%22%20ry=%225.8%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(1200px 700px at 78% -8%, rgba(53, 196, 220, .07), transparent 62%);
}
:root[data-tono="oscuro"] .sidebar {
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(53, 196, 220, .10), transparent 60%),
    linear-gradient(178deg, #0B2133 0%, #06131E 100%);
  box-shadow: 6px 0 30px rgba(0, 0, 0, .5);
}
:root[data-tono="oscuro"] .barra {
  background: rgba(12, 26, 37, .82);
  border-bottom-color: rgba(255, 255, 255, .07);
  box-shadow: none;
}
:root[data-tono="oscuro"] .tarjeta,
:root[data-tono="oscuro"] .metrica { border-color: rgba(255, 255, 255, .08); }
:root[data-tono="oscuro"] .tarjeta:has(table),
:root[data-tono="oscuro"] .tarjeta:has(.vacio) { background: rgba(22, 38, 47, .97); }
:root[data-tono="oscuro"] .metrica { background: rgba(22, 38, 47, .95); }
:root[data-tono="oscuro"] thead th { background: rgba(15, 28, 38, .95); }
:root[data-tono="oscuro"] tbody tr:hover { background: rgba(53, 196, 220, .07); }
:root[data-tono="oscuro"] .tarjeta-cabeza {
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), transparent);
}
:root[data-tono="oscuro"] .buscador input,
:root[data-tono="oscuro"] .campo input,
:root[data-tono="oscuro"] .campo select,
:root[data-tono="oscuro"] .campo textarea {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .1);
  color: var(--texto);
}
:root[data-tono="oscuro"] .buscador input:focus,
:root[data-tono="oscuro"] .campo input:focus,
:root[data-tono="oscuro"] .campo select:focus,
:root[data-tono="oscuro"] .campo textarea:focus {
  background: rgba(255, 255, 255, .09);
  border-color: var(--cyan-500);
}
:root[data-tono="oscuro"] .foto-mascota { background: rgba(255, 255, 255, .07); color: var(--cyan-600); }
/* El boton gris tenia el fondo escrito a mano en casi blanco y nunca se
   corrigio para el tono oscuro. Con el texto claro quedaba blanco sobre
   blanco: invisible. Y esta en las 29 pantallas -"Actualizar",
   "Rechazar", "Derivar a clinica", "Cerrar caso"-, asi que de noche el
   panel se quedaba sin la mitad de sus botones. */
:root[data-tono="oscuro"] .btn-neutro {
  background: rgba(255, 255, 255, .06);
  color: var(--texto);
  border-color: var(--borde-fuerte);
}
:root[data-tono="oscuro"] .btn-neutro:hover {
  background: rgba(255, 255, 255, .12);
  border-color: var(--cyan-500);
  color: var(--texto);
}

/* El iconito del reloj de los campos de hora -y el selector que se abre al
   pulsarlo- los pinta el NAVEGADOR, no nuestro CSS. De noche los pintaba
   oscuros sobre oscuro: el reloj no se veia y el selector se abria en
   blanco. `color-scheme` es la unica forma de avisarle al navegador que
   estamos en modo oscuro. */
:root[data-tono="oscuro"] input[type="time"],
:root[data-tono="oscuro"] input[type="date"] { color-scheme: dark; }

:root[data-tono="oscuro"] .insignia-neutra { background: rgba(255, 255, 255, .09); color: var(--texto-medio); }
:root[data-tono="oscuro"] .capa-caja { background: var(--card-solida); border-color: rgba(255, 255, 255, .1); }
:root[data-tono="oscuro"] .capa-fondo { background: rgba(0, 0, 0, .62); }
:root[data-tono="oscuro"] .cargando-barra {
  background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.11) 50%, rgba(255,255,255,.05) 75%);
  background-size: 240% 100%;
}
:root[data-tono="oscuro"] .tono-opcion:hover { background: rgba(255, 255, 255, .07); }
:root[data-tono="oscuro"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); background-clip: content-box; }
:root[data-tono="oscuro"] ::selection { background: rgba(53, 196, 220, .35); color: #fff; }

/* La pantalla de acceso. Su columna izquierda es blanca por diseno, y el
   logo lleva las letras en azul marino: sobre oscuro desapareceria. Se le
   pone una placa clara detras, que ademas conserva los colores de la
   marca en vez de blanquearla con un filtro. */
:root[data-tono="oscuro"] .acceso-tarjeta { background: var(--card-solida); }
:root[data-tono="oscuro"] .acceso-izq { background: #16262F; }
:root[data-tono="oscuro"] .acceso-logo {
  background: rgba(255, 255, 255, .93);
  padding: 9px 13px; border-radius: 13px;
  box-sizing: content-box;
}
:root[data-tono="oscuro"] .acceso .campo-entrada { background: rgba(255, 255, 255, .05); }
:root[data-tono="oscuro"] .acceso .campo-entrada:focus-within {
  background: rgba(255, 255, 255, .09);
  border-color: var(--cyan-500);
  box-shadow: 0 0 0 4px rgba(53, 196, 220, .16);
}
:root[data-tono="oscuro"] .acceso .campo-entrada input::placeholder { color: #6C8395; }
:root[data-tono="oscuro"] .acceso-entrar { background: var(--cyan-500); color: #04283F; }
:root[data-tono="oscuro"] .acceso-entrar:hover:not(:disabled) {
  background: var(--cyan-400);
  box-shadow: 0 10px 24px rgba(53, 196, 220, .3);
}

/* --------------------- El modo AUTOMATICO ---------------------
   Las mismas reglas, pero solo cuando NO hay eleccion guardada. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tono]) {
    --navy-900: #05121C; --navy-800: #0A1F30; --navy-700: #12354B;
    --fondo: #08151F;
    --card: rgba(21, 38, 51, .88);
    --card-solida: #16262F;
    /* Sobre oscuro la caja suave ACLARA un poco, no blanquea. */
    --caja-suave: rgba(255, 255, 255, .05);
    --borde: rgba(255, 255, 255, .07);
    --borde-fuerte: rgba(255, 255, 255, .13);
    --texto: #E7F0F7; --texto-medio: #A7BDCD; --texto-suave: #7B93A6;
    --ok: #3DD68C;      --ok-bg: rgba(61, 214, 140, .15);
    --alerta: #F2B33D;  --alerta-bg: rgba(242, 179, 61, .15);
    --error: #F8807F;   --error-bg: rgba(248, 128, 127, .15);
    --info: #6BA6FA;    --info-bg: rgba(107, 166, 250, .15);
    /* En oscuro el texto del aviso va CLARO, y el borde tenue. */
    --ok-texto: var(--ok);         --ok-borde: rgba(61, 214, 140, .38);
    --alerta-texto: var(--alerta); --alerta-borde: rgba(242, 179, 61, .38);
    --error-texto: var(--error);   --error-borde: rgba(248, 128, 127, .38);
    --cyan-100: rgba(53, 196, 220, .16);
    --cyan-600: #4FD3E8;
    --s1: 0 1px 2px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.22);
    --s2: 0 2px 6px rgba(0,0,0,.34), 0 10px 26px rgba(0,0,0,.3);
    --s3: 0 8px 18px rgba(0,0,0,.4), 0 22px 50px rgba(0,0,0,.45);
    --sombra: var(--s1); --sombra-md: var(--s2);
  }
  :root:not([data-tono]) body {
    background-image:
      url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22240%22%20height=%22260%22%20viewBox=%220%200%20240%20260%22%3E%3Cg%20fill=%22%2313293B%22%3E%3Cg%20transform=%22translate(38,34)%20rotate(-18)%20scale(1.0)%22%3E%3Cellipse%20cx=%220%22%20cy=%2213%22%20rx=%2210.5%22%20ry=%228.5%22/%3E%3Cellipse%20cx=%22-10.5%22%20cy=%22-2%22%20rx=%224.2%22%20ry=%225.8%22/%3E%3Cellipse%20cx=%22-3.5%22%20cy=%22-8.5%22%20rx=%224.2%22%20ry=%226.2%22/%3E%3Cellipse%20cx=%224.5%22%20cy=%22-7.5%22%20rx=%224.2%22%20ry=%226.2%22/%3E%3Cellipse%20cx=%2211.5%22%20cy=%22-0.5%22%20rx=%224.2%22%20ry=%225.8%22/%3E%3C/g%3E%3Cg%20transform=%22translate(128,70)%20rotate(22)%20scale(0.78)%22%3E%3Cellipse%20cx=%220%22%20cy=%2213%22%20rx=%2210.5%22%20ry=%228.5%22/%3E%3Cellipse%20cx=%22-10.5%22%20cy=%22-2%22%20rx=%224.2%22%20ry=%225.8%22/%3E%3Cellipse%20cx=%22-3.5%22%20cy=%22-8.5%22%20rx=%224.2%22%20ry=%226.2%22/%3E%3Cellipse%20cx=%224.5%22%20cy=%22-7.5%22%20rx=%224.2%22%20ry=%226.2%22/%3E%3Cellipse%20cx=%2211.5%22%20cy=%22-0.5%22%20rx=%224.2%22%20ry=%225.8%22/%3E%3C/g%3E%3Cg%20transform=%22translate(72,118)%20rotate(12)%20scale(0.62)%22%3E%3Cellipse%20cx=%220%22%20cy=%2213%22%20rx=%2210.5%22%20ry=%228.5%22/%3E%3Cellipse%20cx=%22-10.5%22%20cy=%22-2%22%20rx=%224.2%22%20ry=%225.8%22/%3E%3Cellipse%20cx=%22-3.5%22%20cy=%22-8.5%22%20rx=%224.2%22%20ry=%226.2%22/%3E%3Cellipse%20cx=%224.5%22%20cy=%22-7.5%22%20rx=%224.2%22%20ry=%226.2%22/%3E%3Cellipse%20cx=%2211.5%22%20cy=%22-0.5%22%20rx=%224.2%22%20ry=%225.8%22/%3E%3C/g%3E%3Cg%20transform=%22translate(168,150)%20rotate(-25)%20scale(0.9)%22%3E%3Cellipse%20cx=%220%22%20cy=%2213%22%20rx=%2210.5%22%20ry=%228.5%22/%3E%3Cellipse%20cx=%22-10.5%22%20cy=%22-2%22%20rx=%224.2%22%20ry=%225.8%22/%3E%3Cellipse%20cx=%22-3.5%22%20cy=%22-8.5%22%20rx=%224.2%22%20ry=%226.2%22/%3E%3Cellipse%20cx=%224.5%22%20cy=%22-7.5%22%20rx=%224.2%22%20ry=%226.2%22/%3E%3Cellipse%20cx=%2211.5%22%20cy=%22-0.5%22%20rx=%224.2%22%20ry=%225.8%22/%3E%3C/g%3E%3Cg%20transform=%22translate(14,168)%20rotate(30)%20scale(0.7)%22%3E%3Cellipse%20cx=%220%22%20cy=%2213%22%20rx=%2210.5%22%20ry=%228.5%22/%3E%3Cellipse%20cx=%22-10.5%22%20cy=%22-2%22%20rx=%224.2%22%20ry=%225.8%22/%3E%3Cellipse%20cx=%22-3.5%22%20cy=%22-8.5%22%20rx=%224.2%22%20ry=%226.2%22/%3E%3Cellipse%20cx=%224.5%22%20cy=%22-7.5%22%20rx=%224.2%22%20ry=%226.2%22/%3E%3Cellipse%20cx=%2211.5%22%20cy=%22-0.5%22%20rx=%224.2%22%20ry=%225.8%22/%3E%3C/g%3E%3Cg%20transform=%22translate(112,196)%20rotate(-8)%20scale(0.85)%22%3E%3Cellipse%20cx=%220%22%20cy=%2213%22%20rx=%2210.5%22%20ry=%228.5%22/%3E%3Cellipse%20cx=%22-10.5%22%20cy=%22-2%22%20rx=%224.2%22%20ry=%225.8%22/%3E%3Cellipse%20cx=%22-3.5%22%20cy=%22-8.5%22%20rx=%224.2%22%20ry=%226.2%22/%3E%3Cellipse%20cx=%224.5%22%20cy=%22-7.5%22%20rx=%224.2%22%20ry=%226.2%22/%3E%3Cellipse%20cx=%2211.5%22%20cy=%22-0.5%22%20rx=%224.2%22%20ry=%225.8%22/%3E%3C/g%3E%3Cg%20transform=%22translate(186,42)%20rotate(15)%20scale(0.55)%22%3E%3Cellipse%20cx=%220%22%20cy=%2213%22%20rx=%2210.5%22%20ry=%228.5%22/%3E%3Cellipse%20cx=%22-10.5%22%20cy=%22-2%22%20rx=%224.2%22%20ry=%225.8%22/%3E%3Cellipse%20cx=%22-3.5%22%20cy=%22-8.5%22%20rx=%224.2%22%20ry=%226.2%22/%3E%3Cellipse%20cx=%224.5%22%20cy=%22-7.5%22%20rx=%224.2%22%20ry=%226.2%22/%3E%3Cellipse%20cx=%2211.5%22%20cy=%22-0.5%22%20rx=%224.2%22%20ry=%225.8%22/%3E%3C/g%3E%3Cg%20transform=%22translate(56,232)%20rotate(-20)%20scale(0.6)%22%3E%3Cellipse%20cx=%220%22%20cy=%2213%22%20rx=%2210.5%22%20ry=%228.5%22/%3E%3Cellipse%20cx=%22-10.5%22%20cy=%22-2%22%20rx=%224.2%22%20ry=%225.8%22/%3E%3Cellipse%20cx=%22-3.5%22%20cy=%22-8.5%22%20rx=%224.2%22%20ry=%226.2%22/%3E%3Cellipse%20cx=%224.5%22%20cy=%22-7.5%22%20rx=%224.2%22%20ry=%226.2%22/%3E%3Cellipse%20cx=%2211.5%22%20cy=%22-0.5%22%20rx=%224.2%22%20ry=%225.8%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
      radial-gradient(1200px 700px at 78% -8%, rgba(53, 196, 220, .07), transparent 62%);
  }
  :root:not([data-tono]) .sidebar {
    background:
      radial-gradient(120% 60% at 50% 0%, rgba(53, 196, 220, .10), transparent 60%),
      linear-gradient(178deg, #0B2133 0%, #06131E 100%);
    box-shadow: 6px 0 30px rgba(0, 0, 0, .5);
  }
  :root:not([data-tono]) .barra { background: rgba(12, 26, 37, .82); border-bottom-color: rgba(255,255,255,.07); box-shadow: none; }
  :root:not([data-tono]) .tarjeta, :root:not([data-tono]) .metrica { border-color: rgba(255,255,255,.08); }
  :root:not([data-tono]) .tarjeta:has(table), :root:not([data-tono]) .tarjeta:has(.vacio) { background: rgba(22,38,47,.97); }
  :root:not([data-tono]) .metrica { background: rgba(22,38,47,.95); }
  :root:not([data-tono]) thead th { background: rgba(15,28,38,.95); }
  :root:not([data-tono]) tbody tr:hover { background: rgba(53,196,220,.07); }
  :root:not([data-tono]) .tarjeta-cabeza { background: linear-gradient(180deg, rgba(255,255,255,.03), transparent); }
  :root:not([data-tono]) .buscador input,
  :root:not([data-tono]) .campo input,
  :root:not([data-tono]) .campo select,
  :root:not([data-tono]) .campo textarea {
    background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); color: var(--texto);
  }
  :root:not([data-tono]) .foto-mascota { background: rgba(255,255,255,.07); color: var(--cyan-600); }
  :root:not([data-tono]) .insignia-neutra { background: rgba(255,255,255,.09); color: var(--texto-medio); }
  /* Lo mismo para quien tenga el tono en "automatico". */
  :root:not([data-tono]) .btn-neutro {
    background: rgba(255, 255, 255, .06);
    color: var(--texto);
    border-color: var(--borde-fuerte);
  }
  :root:not([data-tono]) .btn-neutro:hover {
    background: rgba(255, 255, 255, .12);
    border-color: var(--cyan-500);
    color: var(--texto);
  }
  /* Lo mismo para el tono "automatico". */
  :root:not([data-tono]) input[type="time"],
  :root:not([data-tono]) input[type="date"] { color-scheme: dark; }
  :root:not([data-tono]) .capa-caja { background: var(--card-solida); border-color: rgba(255,255,255,.1); }
  :root:not([data-tono]) .capa-fondo { background: rgba(0,0,0,.62); }
  :root:not([data-tono]) .cargando-barra {
    background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.11) 50%, rgba(255,255,255,.05) 75%);
    background-size: 240% 100%;
  }
  :root:not([data-tono]) .tono-opcion:hover { background: rgba(255,255,255,.07); }
  :root:not([data-tono]) .acceso-tarjeta { background: var(--card-solida); }
  :root:not([data-tono]) .acceso-izq { background: #16262F; }
  :root:not([data-tono]) .acceso-logo {
    background: rgba(255,255,255,.93); padding: 9px 13px; border-radius: 13px; box-sizing: content-box;
  }
  :root:not([data-tono]) .acceso .campo-entrada { background: rgba(255,255,255,.05); }
  :root:not([data-tono]) .acceso-entrar { background: var(--cyan-500); color: #04283F; }
}

/* Al imprimir siempre en claro: gastar tinta en un fondo negro no tiene
   sentido, y el texto claro sobre papel blanco no se lee. */
@media print {
  :root[data-tono="oscuro"], :root:not([data-tono]) {
    --texto: #000; --texto-medio: #222; --texto-suave: #444;
    --card-solida: #fff; --fondo: #fff;
  }
  .menu-usuario, .usuario-caja { display: none !important; }
}