/* ══════════════════════════════════════════════════════════
   consola.css — Sistema visual de ASEMBIS IA

   Todos los colores viven aqui como variables. Si manana cambia la marca,
   se tocan estas quince lineas y no doscientos sitios.
   ══════════════════════════════════════════════════════════ */

:root {
  /* Marca */
  --azul:            #1c4f9c;
  --azul-oscuro:     #16407e;
  --azul-claro:      #e9f2fb;
  --azul-borde:      #cfe2f5;
  --cian:            #22c1e0;   /* burbuja del paciente */
  --cian-oscuro:     #14a5c2;

  /* La cabecera lleva sus propios tokens: en oscuro no debe aclararse
     siguiendo a --azul, sino oscurecerse como el resto de la interfaz.
     El degradado arranca en el color exacto de la barra lateral, de modo que
     las dos piezas se leen como un solo marco y no como dos azules distintos. */
  --cabecera-fondo:  #1c4f9c;
  --cabecera-texto:  #ffffff;
  --cabecera-degradado: linear-gradient(90deg, #0f1b2d 0%, #17406f 40%, #1e5fae 100%);

  /* Contadores de la cabecera: van siempre sobre fondo oscuro, así que
     necesitan tonos claros en los dos temas. */
  --cabecera-pendiente:  #fbbf24;
  --cabecera-confirmada: #5ee79b;

  /* Estados */
  --verde:           #1f9d55;
  --verde-fondo:     #d9f5e3;
  --ambar:           #b7791f;
  --ambar-fondo:     #fdf3c8;
  --rojo:            #c53030;
  --rojo-fondo:      #fde2e2;
  --gris-fondo:      #eef1f4;

  /* Superficies */
  --fondo:           #f5f7fa;
  --panel:           #ffffff;
  --borde:           #e3e8ee;
  --borde-suave:     #eef1f5;
  --activa:          #ddf3fb;   /* fila seleccionada en la bandeja */
  /* El hilo lleva un fondo distinto del de las burbujas: si coinciden, los
     mensajes salientes desaparecen sobre el panel. */
  --chat-fondo:      #eaeef3;

  /* Texto */
  --texto:           #1f2933;
  --texto-suave:     #667685;
  --texto-tenue:     #9aa5b1;

  /* Barra lateral: se mantiene oscura en los dos temas, como en la mayoría
     de herramientas de trabajo. Da un anclaje visual estable y separa la
     navegación del contenido sin necesidad de bordes. */
  --rail-fondo:        #0f1b2d;
  --rail-borde:        #1c2b42;
  --rail-texto:        #8ba0bb;
  --rail-texto-activo: #ffffff;
  --rail-activo:       #1d3350;
  --rail-hover:        #16263c;

  /* Medidas */
  --alto-cabecera:   46px;
  --ancho-rail:      68px;      /* plegada */
  --ancho-bandeja:   256px;
  --ancho-citas:     236px;
  --radio:           8px;
  --sombra:          0 1px 3px rgba(16, 42, 74, .08);

  color-scheme: light;
}

/* Barra lateral desplegada */
:root[data-nav="expandido"] { --ancho-rail: 212px; }

/* ── Tema oscuro ───────────────────────────────────────────
   Se aplica cuando el usuario lo elige (data-tema="oscuro") o cuando su
   sistema está en oscuro y no ha elegido nada. La segunda regla se excluye
   si eligió claro a propósito, para que su elección gane sobre el sistema. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --azul:            #5b9ae0;
    --azul-oscuro:     #7ab0ea;
    --azul-claro:      #1a2740;
    --azul-borde:      #2a3b57;
    --cian:            #1d8fa8;
    --cian-oscuro:     #167389;

    --cabecera-fondo:  #14283f;
    --cabecera-texto:  #e8eef6;
    --cabecera-degradado: linear-gradient(90deg, #0c1523 0%, #12314f 40%, #16457d 100%);
    --cabecera-pendiente:  #fbbf24;
    --cabecera-confirmada: #5ee79b;

    --verde:           #4ade80;
    --verde-fondo:     #143324;
    --ambar:           #fbbf24;
    --ambar-fondo:     #382c0e;
    --rojo:            #f87171;
    --rojo-fondo:      #3a1c1c;
    --gris-fondo:      #232b36;

    --fondo:           #10151c;
    --panel:           #171d26;
    --borde:           #29323f;
    --borde-suave:     #1f2733;
    --activa:          #1d3345;
    --chat-fondo:      #0b1119;

    --texto:           #e4e9ef;
    --texto-suave:     #98a4b3;
    --texto-tenue:     #6c7886;

    --sombra:          0 1px 3px rgba(0, 0, 0, .45);

    color-scheme: dark;
  }
}

:root[data-tema="oscuro"] {
  --azul:            #5b9ae0;
  --azul-oscuro:     #7ab0ea;
  --azul-claro:      #1a2740;
  --azul-borde:      #2a3b57;
  --cian:            #1d8fa8;
  --cian-oscuro:     #167389;

  --cabecera-fondo:  #14283f;
  --cabecera-texto:  #e8eef6;
  --cabecera-degradado: linear-gradient(90deg, #0c1523 0%, #12314f 40%, #16457d 100%);
  --cabecera-pendiente:  #fbbf24;
  --cabecera-confirmada: #5ee79b;

  --verde:           #4ade80;
  --verde-fondo:     #143324;
  --ambar:           #fbbf24;
  --ambar-fondo:     #382c0e;
  --rojo:            #f87171;
  --rojo-fondo:      #3a1c1c;
  --gris-fondo:      #232b36;

  --fondo:           #10151c;
  --panel:           #171d26;
  --borde:           #29323f;
  --borde-suave:     #1f2733;
  --activa:          #1d3345;
  --chat-fondo:      #0b1119;

  --texto:           #e4e9ef;
  --texto-suave:     #98a4b3;
  --texto-tenue:     #6c7886;

  --sombra:          0 1px 3px rgba(0, 0, 0, .45);

  color-scheme: dark;
}

* { box-sizing: border-box; }

/* Los campos heredan el color del tema. Sin esto quedan blancos sobre fondo
   oscuro: `color-scheme` ayuda con los controles nativos, pero no con los que
   llevan borde o fondo propios. */
input, select, textarea, button {
  font-family: inherit;
  color: var(--texto);
}
input, select, textarea { background: var(--panel); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--azul); outline-offset: -1px; }
::placeholder { color: var(--texto-tenue); opacity: 1; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  /* Hueco para la barra lateral, que va en posición fija */
  padding-left: var(--ancho-rail);
  transition: padding-left .18s ease;
}

/* ══════════════════════════════════════════════════════════
   Barra lateral de navegación
   ══════════════════════════════════════════════════════════ */
.rail {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--ancho-rail);
  background: var(--rail-fondo);
  border-right: 1px solid var(--rail-borde);
  display: flex;
  flex-direction: column;
  z-index: 60;
  transition: width .18s ease;
  overflow: hidden;
}

/* ── Marca ─────────────────────────────────────────────── */
.rail-marca {
  display: flex; align-items: center; gap: 9px;
  height: var(--alto-cabecera);
  padding: 0 12px;
  border-bottom: 1px solid var(--rail-borde);
  flex-shrink: 0;
}

.rail-logo {
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, #2f6fd0, #1c4f9c);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
  letter-spacing: .3px;
}

.rail-nombre { flex: 1; min-width: 0; display: none; }
.rail-nombre b { display: block; color: #fff; font-size: 12.5px; letter-spacing: .3px; }
.rail-nombre span { display: block; color: var(--rail-texto); font-size: 9.5px; letter-spacing: .5px; }

.rail-plegar {
  display: none;
  background: var(--rail-hover);
  border: 1px solid var(--rail-borde);
  cursor: pointer;
  color: var(--rail-texto);
  padding: 5px; border-radius: 6px;
  flex-shrink: 0;
  align-items: center; justify-content: center;
}
.rail-plegar svg { width: 15px; height: 15px; }
.rail-plegar:hover { background: var(--rail-activo); color: #fff; }

/* Plegada, el logo hace de botón: se le da respuesta al pasar el ratón para
   que se note que se puede pulsar. */
:root:not([data-nav="expandido"]) .rail-logo:hover { filter: brightness(1.2); }

:root[data-nav="expandido"] .rail-nombre,
:root[data-nav="expandido"] .rail-plegar { display: block; }
:root[data-nav="expandido"] .rail-plegar { display: flex; }

/* Plegada, el logo hace de botón para desplegar */
:root:not([data-nav="expandido"]) .rail-marca { justify-content: center; padding: 0; }
:root:not([data-nav="expandido"]) .rail-logo { cursor: pointer; }

/* ── Elementos ─────────────────────────────────────────── */
.rail-menu {
  flex: 1;
  padding: 8px 8px 4px;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex; flex-direction: column; gap: 2px;
}

.rail-menu::-webkit-scrollbar { width: 0; }

.rail-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 7px;
  color: var(--rail-texto);
  text-decoration: none;
  font-size: 12.5px;
  background: none; border: none; cursor: pointer;
  width: 100%;
  text-align: left;
  position: relative;
  font-family: inherit;
}
.rail-item:hover { background: var(--rail-hover); color: #fff; }
.rail-item.activa { background: var(--rail-activo); color: var(--rail-texto-activo); font-weight: 600; }

/* Marca de la sección activa, al filo izquierdo */
.rail-item.activa::before {
  content: '';
  position: absolute; left: -8px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 18px;
  border-radius: 0 3px 3px 0;
  background: #4f9bea;
}

.rail-icono { flex-shrink: 0; display: flex; }
.rail-icono svg { width: 19px; height: 19px; }

.rail-etiqueta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.rail-globo {
  margin-left: auto;
  background: #d94f4f; color: #fff;
  border-radius: 9px; font-size: 9.5px; font-weight: 700;
  padding: 1px 5px; min-width: 16px; text-align: center;
}

/* Plegada: icono arriba, etiqueta pequeña debajo */
:root:not([data-nav="expandido"]) .rail-item {
  flex-direction: column;
  gap: 3px;
  padding: 8px 2px;
  justify-content: center;
}
:root:not([data-nav="expandido"]) .rail-etiqueta {
  font-size: 8.5px;
  letter-spacing: .1px;
  max-width: 100%;
  text-align: center;
}
:root:not([data-nav="expandido"]) .rail-globo {
  position: absolute; top: 4px; right: 8px; margin: 0;
}

/* ── Pie ───────────────────────────────────────────────── */
.rail-pie {
  padding: 8px;
  border-top: 1px solid var(--rail-borde);
  display: flex; flex-direction: column; gap: 2px;
  flex-shrink: 0;
}

.rail-usuario {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px;
  color: var(--rail-texto);
  min-width: 0;
}
.rail-avatar {
  width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--rail-activo); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
}
.rail-datos { min-width: 0; display: none; }
.rail-datos b { display: block; color: #e6edf7; font-size: 11.5px; font-weight: 600;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-datos span { display: block; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

:root[data-nav="expandido"] .rail-datos { display: block; }
:root:not([data-nav="expandido"]) .rail-usuario { justify-content: center; padding: 7px 2px; }

/* Aviso al pasar el ratón cuando está plegada */
:root:not([data-nav="expandido"]) .rail-item[data-titulo]:hover::after {
  content: attr(data-titulo);
  position: absolute; left: calc(100% + 6px); top: 50%;
  transform: translateY(-50%);
  background: #1f2b3d; color: #fff;
  padding: 5px 9px; border-radius: 6px;
  font-size: 11.5px; font-weight: 400; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  z-index: 70; pointer-events: none;
}

/* ── Cabecera ──────────────────────────────────────────── */
/* La cabecera es oscura en los dos temas. El degradado arranca en el color de
   la barra lateral y se abre hacia el azul de marca, de modo que las dos
   piezas forman un solo marco alrededor del contenido claro. */
.cabecera {
  height: var(--alto-cabecera);
  background: var(--cabecera-degradado);
  color: var(--cabecera-texto);
  /* Continúa la línea que separa la marca del menú en la barra lateral, para
     que el borde recorra todo el ancho en vez de cortarse a los 68 px. */
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 14px;
  position: sticky;
  top: 0;
  z-index: 40;
}

.cabecera .titulo-pagina {
  font-weight: 600;
  font-size: 14px;
}

.cabecera .distintivo {
  background: rgba(255, 255, 255, .16);
  color: #fff;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .5px;
}

.cabecera .separador {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, .22);
}

.cabecera .etiqueta-sucursal {
  font-size: 9px;
  letter-spacing: .8px;
  color: rgba(255, 255, 255, .6);
  text-transform: uppercase;
}

/* El desplegable se queda claro: sobre el degradado destaca como campo
   utilizable, y así se lee igual en los dos temas. */
.cabecera select {
  background: var(--panel);
  color: var(--texto);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 12px;
  min-width: 170px;
}

.cabecera .contadores {
  margin-left: auto;
  display: flex;
  gap: 22px;
  text-align: center;
}

.contador .numero {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.1;
}
.contador.pendientes  .numero { color: var(--cabecera-pendiente); }
.contador.confirmadas .numero { color: var(--cabecera-confirmada); }

.contador .titulo {
  font-size: 8.5px;
  letter-spacing: .6px;
  color: rgba(255, 255, 255, .65);
  text-transform: uppercase;
}

.cabecera .acciones { display: flex; gap: 8px; align-items: center; }

/* Botón en blanco sólido: un botón azul sobre un degradado azul desaparece. */
.boton-cabecera {
  background: #fff;
  border: none;
  color: #14406f;
  border-radius: 6px;
  padding: 6px 13px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.5;
}
.boton-cabecera:hover { background: #e8f0fb; }

/* ── Estructura de tres columnas ───────────────────────── */
.espacio {
  display: grid;
  grid-template-columns: var(--ancho-bandeja) 1fr var(--ancho-citas);
  height: calc(100vh - var(--alto-cabecera));
}

.columna {
  background: var(--panel);
  overflow-y: auto;
  min-width: 0;               /* sin esto, el hilo desborda en pantallas pequenas */
}

.bandeja { border-right: 1px solid var(--borde); }
.citas   { border-left: 1px solid var(--borde); }

.titulo-panel {
  background: var(--azul-claro);
  border-bottom: 1px solid var(--azul-borde);
  padding: 7px 12px;
  position: sticky;
  top: 0;
  z-index: 5;
}
.titulo-panel .principal { font-weight: 600; font-size: 12px; color: var(--azul-oscuro); }
.titulo-panel .secundario { font-size: 10px; color: var(--texto-suave); margin-top: 1px; }

/* ── Bandeja de conversaciones ─────────────────────────── */
.conversacion {
  display: flex;
  gap: 9px;
  padding: 9px 11px;
  border-bottom: 1px solid var(--borde-suave);
  cursor: pointer;
}
.conversacion:hover { background: var(--borde-suave); }
.conversacion.activa { background: var(--activa); }

.avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--gris-fondo);
  color: var(--texto-suave);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
  flex-shrink: 0;
}
.conversacion.activa .avatar { background: var(--cian); color: #fff; }

.conversacion .cuerpo { flex: 1; min-width: 0; }
.conversacion .fila { display: flex; justify-content: space-between; gap: 6px; }
.conversacion .nombre { font-weight: 600; font-size: 13px; }
.conversacion .hora { font-size: 10.5px; color: var(--texto-tenue); white-space: nowrap; }
.conversacion .avance {
  font-size: 12px; color: var(--texto-suave);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin: 2px 0 4px;
}
.conversacion .pastillas { display: flex; gap: 4px; flex-wrap: wrap; }

.pastilla {
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 9px;
  background: var(--gris-fondo);
  color: var(--texto-suave);
  white-space: nowrap;
}
.pastilla.verde { background: var(--verde-fondo); color: var(--verde); }
.pastilla.ambar { background: var(--ambar-fondo); color: var(--ambar); }
.pastilla.rojo  { background: var(--rojo-fondo);  color: var(--rojo); }

.marca-humano {
  display: flex; align-items: center; gap: 4px;
  font-size: 9.5px; color: var(--ambar);
  margin-top: 3px;
}
.marca-humano::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--ambar);
}

.sin-leer {
  background: var(--verde); color: #fff;
  border-radius: 9px; font-size: 9px; font-weight: 700;
  padding: 0 5px; min-width: 16px; text-align: center;
}

/* ── Hilo ──────────────────────────────────────────────── */
.hilo { display: flex; flex-direction: column; background: var(--panel); }

.hilo-cabecera {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--borde);
  flex-shrink: 0;
}
.hilo-cabecera .datos { flex: 1; min-width: 0; }
.hilo-cabecera .nombre { font-weight: 600; font-size: 14px; }
.hilo-cabecera .telefono { font-size: 12px; color: var(--texto-suave); }

.etiqueta-sede {
  background: var(--gris-fondo); color: var(--texto-suave);
  border-radius: 3px; padding: 2px 7px; font-size: 10px;
}

.estado-ia {
  display: flex; align-items: center; gap: 5px;
  font-size: 10.5px; color: var(--verde);
}
.estado-ia::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--verde);
}
.estado-ia.humano { color: var(--ambar); }
.estado-ia.humano::before { background: var(--ambar); }

.boton {
  border: 1px solid var(--borde);
  background: var(--panel);
  border-radius: 4px;
  padding: 4px 11px;
  font-size: 11px;
  cursor: pointer;
  color: var(--texto);
  white-space: nowrap;
}
.boton:hover { background: var(--gris-fondo); }
.boton.principal { background: var(--azul); border-color: var(--azul); color: #fff; }
.boton.principal:hover { background: var(--azul-oscuro); }
.boton.verde { background: var(--verde); border-color: var(--verde); color: #fff; }
.boton:disabled { opacity: .5; cursor: not-allowed; }

/* El hilo es lo que más se lee del día: texto a 14 px, como una aplicación de
   mensajería, y fondo propio para que las burbujas se recorten sobre él. */
.mensajes {
  flex: 1;
  overflow-y: auto;
  padding: 16px 22px;
  background: var(--chat-fondo);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.separador-fecha { text-align: center; margin: 8px 0 4px; }
.separador-fecha span {
  background: var(--panel);
  color: var(--texto-suave);
  font-size: 11px;
  padding: 4px 13px;
  border-radius: 10px;
  box-shadow: var(--sombra);
}

.burbuja {
  /* Se limita también en píxeles: en pantallas anchas, un 62 % da líneas
     demasiado largas y cuesta seguirlas. */
  max-width: min(66%, 640px);
  padding: 9px 13px 7px;
  border-radius: 9px;
  font-size: 14px;
  line-height: 1.5;
  position: relative;
  box-shadow: 0 1px 1px rgba(16, 42, 74, .12);
}
.burbuja .hora {
  display: block;
  font-size: 11px;
  margin-top: 3px;
  opacity: .6;
  text-align: right;
}

.burbuja.saliente { align-self: flex-start; background: var(--panel); }
.burbuja.entrante { align-self: flex-end; background: var(--cian); color: #fff; }
.burbuja.entrante .hora { opacity: .85; }

.autor {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--azul);
  margin-bottom: 3px;
  text-transform: uppercase;
}

.burbuja.nota {
  align-self: center;
  background: var(--ambar-fondo);
  color: var(--ambar);
  border: none;
  font-size: 12px;
  max-width: 80%;
  text-align: center;
}

/* ── Tarjeta de llamada dentro del hilo ────────────────── */
.tarjeta-llamada {
  align-self: flex-start;
  max-width: min(66%, 640px);
  border: 1px solid var(--azul-borde);
  background: var(--azul-claro);
  border-radius: 9px;
  padding: 10px 13px;
  font-size: 13.5px;
}
.tarjeta-llamada .encabezado {
  display: flex; align-items: center; gap: 6px;
  font-weight: 600; color: var(--azul-oscuro);
  margin-bottom: 4px;
}
.tarjeta-llamada .detalle { color: var(--texto-suave); font-size: 12.5px; }
.tarjeta-llamada audio { width: 100%; margin-top: 7px; height: 30px; }
.tarjeta-llamada .transcripcion {
  margin-top: 7px; font-size: 11px; color: var(--texto-suave);
  max-height: 140px; overflow-y: auto; white-space: pre-wrap;
  border-top: 1px solid var(--azul-borde); padding-top: 6px;
}

.punto-vivo {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--verde);
  animation: latido 1.2s infinite;
}
@keyframes latido {
  0%, 100% { opacity: 1; }
  50%      { opacity: .25; }
}

/* ── Redactor ──────────────────────────────────────────── */
.redactor {
  border-top: 1px solid var(--borde);
  padding: 9px 12px;
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex-shrink: 0;
}
/* Mismo tamaño que las burbujas: lo que se escribe se ve igual que lo que
   recibe el paciente. */
.redactor textarea {
  flex: 1;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 8px 12px;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  resize: none;
  max-height: 120px;
  min-height: 38px;
}
.redactor textarea:focus { outline: none; border-color: var(--azul); }

.aviso-ventana {
  background: var(--ambar-fondo);
  color: var(--ambar);
  font-size: 11px;
  padding: 7px 12px;
  border-top: 1px solid var(--borde);
}

/* ── Panel de citas ────────────────────────────────────── */
.tarjeta-cita {
  border-bottom: 1px solid var(--borde-suave);
  padding: 10px 12px;
}
.tarjeta-cita .cuando { font-weight: 700; font-size: 12.5px; }
.tarjeta-cita .servicio { font-size: 11.5px; color: var(--texto-suave); margin-top: 1px; }
.tarjeta-cita .meta { font-size: 10px; color: var(--texto-tenue); margin-top: 4px; line-height: 1.5; }
.tarjeta-cita .cabeza { display: flex; justify-content: space-between; gap: 6px; align-items: flex-start; }

.insignia {
  font-size: 9.5px; font-weight: 600;
  padding: 2px 7px; border-radius: 9px;
  white-space: nowrap;
}
.insignia.confirmada { background: var(--verde-fondo); color: var(--verde); }
.insignia.pendiente  { background: var(--ambar-fondo); color: var(--ambar); }
.insignia.anulada    { background: var(--rojo-fondo);  color: var(--rojo); }

.boton-confirmar {
  width: 100%;
  margin-top: 8px;
  border: none;
  border-radius: 5px;
  padding: 8px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  background: var(--verde);
  color: #fff;
}
.boton-confirmar.pendiente { background: var(--panel); color: var(--azul); border: 1px solid var(--azul); }
.boton-confirmar:hover { filter: brightness(.94); }

.acciones-cita { display: flex; gap: 6px; margin-top: 6px; }
.acciones-cita .boton { flex: 1; text-align: center; font-size: 10.5px; padding: 5px; }

/* ── Estados vacios y carga ────────────────────────────── */
.vacio {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  height: 100%; padding: 30px;
  color: var(--texto-tenue); text-align: center;
}
.vacio .icono { font-size: 30px; opacity: .35; margin-bottom: 9px; }
.vacio .titulo { font-size: 13px; font-weight: 600; color: var(--texto-suave); }
.vacio .detalle { font-size: 11.5px; margin-top: 4px; max-width: 260px; }

.esqueleto {
  background: linear-gradient(90deg, var(--borde-suave) 25%, var(--gris-fondo) 50%, var(--borde-suave) 75%);
  background-size: 200% 100%;
  animation: brillo 1.3s infinite;
  border-radius: 4px;
}
@keyframes brillo {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Ventana modal ─────────────────────────────────────── */
.velo {
  position: fixed; inset: 0;
  background: rgba(16, 32, 54, .45);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
}
.modal {
  background: var(--panel);
  border-radius: var(--radio);
  width: 420px; max-width: 92vw;
  box-shadow: 0 12px 40px rgba(16, 42, 74, .22);
}
.modal .encabezado { padding: 13px 16px; border-bottom: 1px solid var(--borde); font-weight: 600; }
.modal .cuerpo { padding: 16px; }
.modal .pie { padding: 12px 16px; border-top: 1px solid var(--borde); display: flex; justify-content: flex-end; gap: 8px; }

.campo { margin-bottom: 12px; }
.campo label { display: block; font-size: 11px; color: var(--texto-suave); margin-bottom: 4px; }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 7px 9px;
  border: 1px solid var(--borde); border-radius: 5px;
  font: inherit; font-size: 12.5px;
}

.barra-progreso { height: 5px; background: var(--gris-fondo); border-radius: 3px; overflow: hidden; }
.barra-progreso .relleno { height: 100%; background: var(--verde); width: 0; transition: width .3s; }

/* ── Pantallas estrechas ───────────────────────────────── */
@media (max-width: 1200px) {
  :root { --ancho-bandeja: 210px; --ancho-citas: 200px; }
  .burbuja, .tarjeta-llamada { max-width: 78%; }
  /* Con poco ancho, la barra desplegada se come el contenido: se pliega
     aunque el usuario la hubiera dejado abierta. */
  :root[data-nav="expandido"] { --ancho-rail: 68px; }
  :root[data-nav="expandido"] .rail-nombre,
  :root[data-nav="expandido"] .rail-datos { display: none; }
  :root[data-nav="expandido"] .rail-item { flex-direction: column; gap: 3px; padding: 8px 2px; }
  :root[data-nav="expandido"] .rail-etiqueta { font-size: 8.5px; text-align: center; }
}

@media (max-width: 820px) {
  .espacio { grid-template-columns: 1fr; }
  .bandeja, .citas { display: none; }
  .espacio.ver-bandeja .bandeja { display: block; }
  .espacio.ver-citas   .citas   { display: block; }
  .cabecera .contadores { display: none; }
}