/* ====================================================================
   Centros de estudios de imágenes (JEA-215)

   Hoja propia: los centros son una entidad separada, no una variante del
   médico, y mezclar sus estilos con los del portal médico habría acabado en
   selectores que se pisan.
   ==================================================================== */

/* --- El acceso profesional, en el pie del portal del paciente -------- */
.acceso-pro-pie {
  display: flex; justify-content: center;
  padding: 18px 16px 26px; margin-top: 8px;
  border-top: 1px solid var(--border-color-subtle);
}
.acceso-pro-enlace {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 1px solid var(--border-color); border-radius: 999px;
  padding: 8px 16px; min-height: 26px; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 700; color: var(--slate-500);
}
.acceso-pro-enlace:hover { color: var(--primary-600); border-color: var(--primary-300); background: var(--primary-50); }
.acceso-pro-enlace:focus-visible { outline: 2px solid var(--primary-400); outline-offset: 2px; }

.acceso-pro-opciones { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.acceso-pro-opcion {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px; border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  background: var(--bg-surface); cursor: pointer; font-family: inherit; text-align: left;
}
.acceso-pro-opcion:hover { border-color: var(--primary-400); background: var(--primary-50); }
.acceso-pro-opcion:focus-visible { outline: 2px solid var(--primary-400); outline-offset: 1px; }
.acceso-pro-icono {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-50); color: var(--primary-600);
}
.acceso-pro-icono.centro { background: #f3e8ff; color: #7c3aed; }
.acceso-pro-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.acceso-pro-texto strong { font-size: 14px; font-weight: 800; color: var(--slate-900); }
.acceso-pro-texto em { font-style: normal; font-size: 12px; color: var(--slate-500); }

.acceso-pro-registro {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-color-subtle);
  text-align: center;
}
.acceso-pro-registro p { font-size: 12.5px; color: var(--slate-500); margin-bottom: 8px; }

/* --- El formulario de solicitud ------------------------------------- */
/* Los campos de formulario del mundo "centro".
 *
 * POR QUE DOS CONTENEDORES Y NO SOLO .sol-form
 * -------------------------------------------
 * Estas reglas nacieron para el formulario publico de solicitud de acceso, que
 * vive dentro de .sol-form. Pero "Mi centro" pinta sus campos dentro de
 * .centro-tarjeta y reutiliza .sol-fila para las parejas de columnas.
 *
 * El resultado era una pestana rota de una forma poco evidente: .sol-fila si
 * aplicaba --dos columnas-- pero nada mas. Sin el label en columna, la
 * etiqueta y su campo se colocaban uno al lado del otro; sin el estilo del
 * span, el texto salia al tamano por defecto del navegador; y los input
 * quedaban con la pinta cruda del sistema. Se veia desordenado y con las
 * letras de otro tamano, que es justo como se describio.
 *
 * Nombrar los dos contenedores mantiene una sola definicion de "asi se ve un
 * campo aqui". Duplicar el bloque para .centro-tarjeta habria dejado dos
 * definiciones que se separan a la primera de cambio. */
.sol-form { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.sol-form label,
.centro-tarjeta label:not(.cat-marca) { display: flex; flex-direction: column; gap: 4px; }
.sol-form label > span,
.centro-tarjeta label:not(.cat-marca) > span { font-size: 12px; font-weight: 700; color: var(--slate-700); }
.sol-form label > span em,
.centro-tarjeta label > span em { font-style: normal; font-weight: 500; color: var(--slate-500); }
.centro-tarjeta .sol-fila { margin-bottom: 12px; }
.centro-tarjeta > label { margin-bottom: 12px; }
.sol-form input, .sol-form textarea, .sol-form select,
.centro-tarjeta input:not([type="checkbox"]):not(.cat-precio),
.centro-tarjeta textarea, .centro-tarjeta select {
  padding: 10px 12px; border: 1px solid var(--border-color); border-radius: var(--radius-md);
  font-family: inherit; font-size: 13.5px; background: var(--bg-surface); color: var(--slate-900);
}
.sol-form input:focus, .sol-form textarea:focus,
.centro-tarjeta input:focus, .centro-tarjeta textarea:focus { outline: 2px solid var(--primary-400); outline-offset: -1px; }
.sol-form textarea { resize: vertical; }
.sol-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sol-archivo small { font-size: 12px; color: var(--slate-500); }
.sol-archivo small.mal { color: var(--danger-700); font-weight: 700; }
.conf-nota {
  font-size: 12px; color: var(--warning-700); background: var(--warning-50); border: 1px solid #fde68a;
  border-radius: var(--radius-md); padding: 9px 11px; margin: 0;
}

/* --- El portal ------------------------------------------------------ */
/* El envoltorio del modo admin lleva `overflow: hidden` y altura fija: el
   panel de administracion cabe dentro porque SU contenido tiene scroll
   propio. Sin esto, todo lo que no entrara en la caja quedaba recortado e
   inalcanzable --ni la rueda del raton llegaba--, que es exactamente lo que
   paso al abrir "Mi centro". Mismo fallo que JEA-203. */
.centro-portal {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.centro-portal > .centro-cabecera,
.centro-portal > .centro-pendiente,
.centro-portal > .centro-pestanas { flex-shrink: 0; }
.centro-cargando, .centro-error, .centro-vacio {
  font-size: 13px; color: var(--slate-500); padding: 18px 0; text-align: center;
}
.centro-error { color: var(--danger-700); }

.centro-cabecera {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px 14px; border-bottom: 1px solid var(--border-color);
}
.centro-cabecera-acciones { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* La salida. El portal del medico tiene la suya desde siempre; a este se me
   olvido, y al guardarse el modo en el navegador quien entraba se quedaba
   dentro: recargar volvia a traerte aqui. Ver JEA-215. */
.centro-volver {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border-color); background: var(--bg-surface);
  border-radius: 999px; padding: 7px 13px; min-height: 26px; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 700; color: var(--slate-600);
}
.centro-volver:hover { color: var(--primary-700); border-color: var(--primary-300); background: var(--primary-50); }
.centro-identidad { display: flex; align-items: center; gap: 11px; min-width: 0; }
.centro-logo { width: 42px; height: 42px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.centro-logo-vacio {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-50); color: var(--primary-600);
}
.centro-identidad strong { display: block; font-size: 15px; font-weight: 800; color: var(--slate-900); }
.centro-identidad span { font-size: 12px; color: var(--slate-500); }
.centro-salir {
  width: 34px; height: 34px; border-radius: var(--radius-md); flex-shrink: 0;
  border: 1px solid var(--border-color); background: var(--bg-surface);
  color: var(--slate-500); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.centro-salir:hover { color: var(--danger-700); border-color: var(--danger-200); background: var(--danger-50); }

.centro-pendiente { margin: 14px 20px 0; }
.centro-pendiente, .centro-aviso {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 14px;
  font-size: 12.5px; color: var(--warning-700); background: var(--warning-50); border: 1px solid #fde68a;
  border-radius: var(--radius-md); padding: 10px 12px;
}
.centro-pendiente i, .centro-aviso i { flex-shrink: 0; margin-top: 1px; }

.centro-pestanas { display: flex; gap: 4px; padding: 0 20px; border-bottom: 1px solid var(--border-color); }
.centro-pestana {
  background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 700; color: var(--slate-500);
  padding: 9px 14px; min-height: 26px;
}
.centro-pestana.activa { color: var(--primary-700); border-bottom-color: var(--primary-600); }
.centro-pestana:hover { color: var(--slate-800); }
/* Aqui es donde se desplaza. Todo lo demas se queda fijo arriba. */
.centro-cuerpo { flex: 1; overflow-y: auto; padding: 16px 20px 32px; }

/* --- Métricas ------------------------------------------------------- */
.centro-metricas { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.centro-metrica {
  flex: 1; min-width: 130px; background: var(--bg-surface);
  border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 12px 14px;
}
.centro-metrica b { display: block; font-size: 22px; font-weight: 800; color: var(--slate-900); line-height: 1.1; }
.centro-metrica span { font-size: 12px; color: var(--slate-500); font-weight: 600; }
.centro-metrica.alerta { border-color: var(--danger-200); background: var(--danger-50); }
.centro-metrica.alerta b { color: var(--danger-700); }

/* --- El tablero ----------------------------------------------------- */
.kanban {
  display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px;
  scroll-snap-type: x proximity;
}
.kanban-col {
  flex: 0 0 268px; scroll-snap-align: start;
  background: var(--slate-50); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); display: flex; flex-direction: column;
}
.kanban-col > header {
  /* Nombre y contador juntos, no en extremos opuestos. Ver el criterio al
     final de este archivo. */
  display: flex; align-items: center; justify-content: flex-start; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid var(--border-color);
}
.kanban-col-nombre { font-size: 12px; font-weight: 800; color: var(--slate-700); }
.kanban-col-n {
  font-family: ui-monospace, monospace; font-size: 12px; font-weight: 700;
  color: var(--slate-600); background: var(--bg-surface);
  min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
}
.kanban-cuerpo { padding: 10px; display: flex; flex-direction: column; gap: 9px; min-height: 60px; }
.kanban-vacia { font-size: 12px; color: var(--slate-500); text-align: center; padding: 8px 0; margin: 0; }

.kanban-tarjeta {
  background: var(--bg-surface); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); padding: 11px 12px; cursor: pointer;
  display: flex; flex-direction: column; gap: 5px;
}
.kanban-tarjeta:hover { border-color: var(--primary-300); box-shadow: var(--shadow-sm); }
.kanban-tarjeta.urgente-alta { border-left: 3px solid #d97706; }
.kanban-tarjeta.urgente-critica { border-left: 3px solid #b91c1c; background: var(--danger-50); }
.kanban-tarjeta > header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.kanban-tarjeta strong { font-size: 13px; font-weight: 700; color: var(--slate-900); }
.kanban-reloj {
  font-family: ui-monospace, monospace; font-size: 12px; font-weight: 700;
  color: var(--slate-500); flex-shrink: 0;
}
.kanban-reloj.rojo { color: var(--danger-700); }
.kanban-estudio { font-size: 12.5px; color: var(--slate-700); margin: 0; }
.kanban-datos, .kanban-dias { font-size: 12px; color: var(--slate-500); margin: 0; }
.kanban-contacto { display: flex; gap: 6px; margin-top: 3px; }
.kanban-contacto a {
  display: inline-flex; align-items: center; gap: 4px; text-decoration: none;
  font-size: 12px; font-weight: 700; color: var(--primary-700);
  background: var(--primary-50); border-radius: var(--radius-sm);
  padding: 4px 9px; min-height: 26px;
}
.kanban-contacto a:hover { background: var(--primary-100); }

.centro-salidas { margin-top: 16px; }
.centro-salidas summary {
  cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--slate-600); padding: 8px 0;
}
.centro-salidas .kanban-cuerpo {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); padding: 8px 0;
}

/* --- La ficha de una solicitud -------------------------------------- */
.ficha-datos { display: flex; flex-direction: column; gap: 9px; margin: 0 0 16px; }
.ficha-datos > div { display: flex; gap: 10px; align-items: baseline; }
.ficha-datos dt { font-size: 12px; font-weight: 700; color: var(--slate-500); min-width: 118px; flex-shrink: 0; }
.ficha-datos dd { margin: 0; font-size: 13px; color: var(--slate-800); }
.ficha-datos .ficha-notas { flex-direction: column; gap: 3px; padding: 9px 11px; background: var(--warning-50); border: 1px solid #fde68a; border-radius: var(--radius-md); }
.ficha-acciones { border-top: 1px solid var(--border-color); padding-top: 13px; }
.ficha-acciones-titulo { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--slate-500); }
.ficha-botones { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.ficha-accion {
  border: 1px solid var(--primary-300); background: var(--primary-50); color: var(--primary-800);
  border-radius: var(--radius-md); padding: 8px 13px; min-height: 26px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 700;
}
.ficha-accion:hover { background: var(--primary-100); }
.ficha-accion.peligro { border-color: var(--danger-200); background: var(--danger-50); color: var(--danger-700); }
.ficha-final { font-size: 12.5px; color: var(--slate-500); text-align: center; padding: 12px 0; }
.ficha-historial { margin-top: 16px; }
.ficha-historial summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--slate-600); }
.ficha-historial ol { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.ficha-historial li {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
  font-size: 12px; padding: 7px 10px; background: var(--slate-50); border-radius: var(--radius-sm);
}
.hist-estado { font-weight: 700; color: var(--slate-800); }
.hist-quien { color: var(--primary-700); font-weight: 600; }
.hist-cuando { color: var(--slate-500); font-family: ui-monospace, monospace; font-size: 12px; margin-left: auto; }
.hist-nota { width: 100%; color: var(--slate-600); }

/* --- La ficha del centro -------------------------------------------- */
.centro-tarjeta {
  background: var(--bg-surface); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: 18px 20px; margin-bottom: 14px;
}
.centro-tarjeta h4 {
  font-size: 14px; font-weight: 800; color: var(--slate-900); margin: 0 0 12px;
  display: flex; align-items: center; gap: 8px;
}
.centro-cuenta {
  font-family: ui-monospace, monospace; font-size: 12px; font-weight: 700;
  color: var(--primary-700); background: var(--primary-50);
  min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
}
.centro-nota { font-size: 12px; color: var(--slate-500); margin: -4px 0 12px; }
.centro-tarjeta .btn { margin-top: 14px; }
.centro-sucursales { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.centro-sucursales li { padding: 0; background: var(--slate-50); border-radius: var(--radius-md); overflow: hidden; }

/* Cada sucursal, colapsable (JEA-221). Cerrada deja solo nombre y ciudad, que
   es lo que distingue una de otra; dentro va la direccion, el telefono y si
   tiene pin en el mapa.
   Abiertas cuando hay dos o menos: colapsar existe para domar una lista larga,
   y con dos sucursales no hay lista larga que domar --solo un clic de mas para
   ver lo que cabia de sobra. A partir de tres se abren a peticion. */
.suc-ficha > summary {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; cursor: pointer; min-height: 24px;
}
.suc-ficha > summary:focus-visible { outline: 2px solid var(--primary-400); outline-offset: -2px; }
.suc-ficha > summary:hover { background: var(--slate-100); }
.suc-ciudad { font-size: 12px; color: var(--slate-500); }
.suc-cuerpo {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 0 12px 10px; flex-wrap: wrap;
}
.centro-sucursales strong { font-size: 13px; color: var(--slate-900); }
.centro-sucursales span { font-size: 12px; color: var(--slate-600); }
.centro-sucursales em { display: block; font-style: normal; font-size: 12px; color: var(--slate-500); margin-top: 2px; }
.centro-sucursales em.falta { color: var(--warning-600); font-weight: 700; }

/* CATALOGO DE ESTUDIOS EN DOS COLUMNAS  ·  JEA-221
 *
 * Antes cada estudio ocupaba una fila entera, con el nombre a la izquierda y
 * el precio pegado al borde derecho. Con mas de cuarenta estudios la pagina se
 * hacia interminable, y la mirada tenia que cruzar todo el ancho para unir un
 * nombre con su precio.
 *
 * Ahora van en tarjetas de dos columnas, con el precio DEBAJO del nombre y no
 * enfrente. Las categorias arrancan cerradas --se abren al buscar-- asi que lo
 * primero que se ve son siete cabeceras, no cuarenta filas.
 */

/* Los botones de categoria, uno al lado de otro (JEA-221, segunda pasada).
 *
 * Iban apilados, cada uno a ancho completo: siete botones ocupando siete filas
 * enteras para decir siete palabras. Ahora van en rejilla y caben varios por
 * linea.
 *
 * El truco esta en `grid-column: 1 / -1` sobre el que esta abierto: cerrados
 * comparten fila, y en cuanto uno se despliega se lleva la fila entera para su
 * lista. Sin eso, abrir una categoria estrecha dejaria las tarjetas de estudio
 * espachurradas en una columna de 220px. */
.cat-centro {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 6px;
  align-items: start;
}
.cat-grupo[open] { grid-column: 1 / -1; }

.cat-buscador { position: relative; display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cat-buscador input {
  flex: 1 1 auto; min-width: 0;
  padding: 8px 12px; font-size: 13px; font-family: inherit;
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
  background: var(--bg-surface); color: var(--slate-900);
}
.cat-buscador input:focus { outline: 2px solid var(--primary-400); outline-offset: -1px; }
.cat-buscador-cuenta {
  font-size: 12px; font-weight: 700; color: var(--slate-600);
  white-space: nowrap; flex-shrink: 0;
}

.cat-grupo { border: 1px solid var(--border-color); border-radius: var(--radius-md); }
.cat-grupo summary {
  cursor: pointer; padding: 10px 13px; font-size: 13px; font-weight: 700; color: var(--slate-800);
  display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  min-height: 24px;
}
.cat-grupo summary:focus-visible { outline: 2px solid var(--primary-400); outline-offset: -2px; }
.cat-grupo-nombre { min-width: 0; }
.cat-grupo-n {
  font-family: ui-monospace, monospace; font-size: 12px; color: var(--slate-500);
  flex-shrink: 0;
}
/* Que se note de un vistazo que categorias tienen algo marcado, con las
   cabeceras cerradas y sin abrirlas. */
.cat-grupo-n.con { color: var(--primary-700); font-weight: 700; }

.est-rejilla {
  display: grid;
  /* Antes eran dos columnas fijas, asi que en una pantalla ancha cada tarjeta
     se estiraba hasta media pantalla para decir "Sonografia abdominal". Con
     `auto-fill` la tarjeta mantiene un ancho legible y caben las que quepan. */
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
  padding: 0 13px 12px;
  align-items: stretch;   /* altura uniforme en cada fila */
}

.est-tarjeta {
  display: flex; flex-direction: column; justify-content: space-between; gap: 7px;
  padding: 9px 10px; border-radius: var(--radius-sm);
  background: var(--slate-50); border: 1px solid transparent;
}
.est-tarjeta.ofrecido { background: var(--primary-50); border-color: var(--primary-200, #bae6fd); }

/* La casilla mide 16, pero el blanco que cuenta es la etiqueta entera
   --pulsarla alterna igual--. Sin `min-height` la fila se quedaba tambien en
   16, por debajo del minimo tactil de 24. */
.cat-marca { display: flex; align-items: flex-start; gap: 8px; min-width: 0; cursor: pointer; min-height: 24px; }
.cat-marca input { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.est-nombre { font-size: 12.5px; line-height: 1.35; color: var(--slate-800); overflow-wrap: anywhere; }

.est-pie { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.cat-precio {
  width: 104px; flex-shrink: 0; padding: 5px 9px; font-size: 12.5px;
  border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  font-family: inherit; background: var(--bg-surface);
  font-variant-numeric: tabular-nums;
}
.cat-precio:disabled { opacity: .4; }
.est-dato { font-size: 12px; color: var(--slate-500); white-space: nowrap; }
.est-contraste {
  font-style: normal; font-size: 12px; font-weight: 700; color: var(--warning-700);
  background: var(--warning-50); padding: 2px 7px; border-radius: 999px; flex-shrink: 0;
}
.cat-nada { font-size: 12.5px; color: var(--slate-500); text-align: center; padding: 18px 6px; }

/* Una sola columna cuando dos ya no caben. 560 y no 768: la tarjeta necesita
   unos 250px para que el nombre no se parta en cuatro lineas, y por debajo de
   eso dos columnas empeoran lo que venian a arreglar. */
@media (max-width: 560px) {
  .est-rejilla { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  /* En movil el envoltorio deja de recortar, asi que el portal crece y
     desplaza la pagina entera, como el resto de la aplicacion. */
  .centro-portal { height: auto; min-height: 100%; overflow: visible; }
  .centro-cuerpo { overflow: visible; padding: 14px 14px 40px; }
  .centro-cabecera { padding: 12px 14px 12px; }
  .centro-pestanas { padding: 0 14px; }
  .centro-pendiente { margin: 12px 14px 0; }
  .sol-fila { grid-template-columns: 1fr; }
  .kanban-col { flex-basis: 84%; }
  .ficha-datos > div { flex-direction: column; gap: 2px; }
  .ficha-datos dt { min-width: 0; }
}

/* ====================================================================
   PORTAL DEL PACIENTE — estudios de imágenes (JEA-215, fase 3)
   ==================================================================== */

/* --- El selector de arriba ------------------------------------------ */
.selector-categoria {
  display: flex; gap: 4px; padding: 4px;
  background: var(--slate-100); border-radius: 999px; margin-bottom: 12px;
}
.selector-cat {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; background: none; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--slate-600);
  padding: 9px 12px; min-height: 26px; transition: background .15s ease, color .15s ease;
}
.selector-cat.activa { background: var(--bg-surface); color: var(--primary-700); box-shadow: var(--shadow-sm); }
.selector-cat:focus-visible { outline: 2px solid var(--primary-400); outline-offset: -2px; }

/* --- Filtros de centros --------------------------------------------- */
.centros-filtros {
  display: flex; gap: 6px; overflow-x: auto; padding: 0 16px 12px;
  scrollbar-width: none;
}
.centros-filtros::-webkit-scrollbar { display: none; }
.centros-filtro {
  flex-shrink: 0; border: 1px solid var(--border-color); background: var(--bg-surface);
  border-radius: 999px; padding: 7px 13px; min-height: 26px; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 700; color: var(--slate-600);
  white-space: nowrap;
}
.centros-filtro.activo { background: var(--primary-600); border-color: var(--primary-600); color: #fff; }
.centros-filtro.contraste.activo { background: var(--warning-600); border-color: var(--warning-600); }

/* --- Tarjeta de centro ---------------------------------------------- */
.centro-card {
  background: var(--bg-surface); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: 14px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 11px; cursor: pointer;
}
.centro-card:hover { border-color: var(--primary-200); box-shadow: var(--shadow-md); }
.centro-card-top { display: flex; gap: 12px; }
.centro-card-logo {
  width: 56px; height: 56px; border-radius: var(--radius-md); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  background: var(--primary-50); color: var(--primary-600);
}
.centro-card-logo.grande { width: 56px; height: 56px; }
.centro-card-logo img { width: 100%; height: 100%; object-fit: cover; }
.centro-card-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.centro-card-nombre {
  font-size: 14px; font-weight: 800; color: var(--slate-900); margin: 0; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.centro-card-zona, .centro-card-respuesta {
  display: flex; align-items: center; gap: 5px; margin: 0;
  font-size: 12px; color: var(--slate-500);
}
.centro-card-respuesta { color: var(--primary-700); font-weight: 600; }
.centro-card-estudios { display: flex; flex-wrap: wrap; gap: 5px; }
.centro-card-estudio {
  font-size: 12px; color: var(--slate-700); background: var(--slate-100);
  border-radius: var(--radius-sm); padding: 3px 8px;
}
.centro-card-estudio.mas { background: var(--primary-50); color: var(--primary-700); font-weight: 700; }
.centro-card-sin { font-size: 12px; color: var(--slate-500); margin: 0; }
.centro-card-seguros {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  padding-top: 8px; border-top: 1px dashed var(--slate-200);
}
.centro-card-seguros > span:first-child { font-size: 12px; color: var(--slate-500); font-weight: 600; }
.centro-card-pie {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-top: 10px; border-top: 1px solid var(--border-color-subtle); margin-top: auto;
}
.centro-card-precio { display: flex; flex-direction: column; }
.centro-card-acciones { display: flex; gap: 8px; }

/* --- Ficha del centro ------------------------------------------------ */
.centro-detalle-cab { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.centro-detalle-cab h3 { font-size: 17px; font-weight: 800; color: var(--slate-900); margin: 0; }
.centro-detalle-cab p { font-size: 12.5px; color: var(--primary-700); font-weight: 600; margin: 2px 0 0; }
.centro-detalle-cab > button { margin-left: auto; }
.centro-detalle-titulo {
  display: block; font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: var(--slate-500); margin-bottom: 8px;
}
.centro-detalle-titulo em {
  font-style: normal; background: var(--primary-50); color: var(--primary-700);
  padding: 1px 7px; border-radius: 999px; margin-left: 4px;
}
.centro-detalle-sedes, .centro-detalle-seguros { margin-bottom: 16px; }
.centro-sede { background: var(--slate-50); border-radius: var(--radius-md); padding: 11px 13px; }
.centro-sede strong { display: block; font-size: 13px; color: var(--slate-900); }
.centro-sede > span { font-size: 12px; color: var(--slate-600); }
.centro-horarios { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
/* Dia y horario juntos, con el dia a ancho fijo para que las horas queden
   alineadas en columna. Con `space-between` el dia se iba a la izquierda y la
   hora al borde derecho, y en una tarjeta ancha quedaban a un palmo. */
.centro-horarios li { display: flex; justify-content: flex-start; gap: 10px; font-size: 12px; color: var(--slate-600); }
.centro-horarios li > span:first-child { min-width: 9ch; }
.centro-como-llegar {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 8px;
  font-size: 12px; font-weight: 700; color: var(--primary-700); text-decoration: none;
}
.centro-detalle-seguros > div { display: flex; flex-wrap: wrap; gap: 5px; }
.cd-grupo { border: 1px solid var(--border-color); border-radius: var(--radius-md); margin-bottom: 7px; }
/* CATALOGO PUBLICO EN ACORDEON  ·  JEA-221 fase 3
 *
 * Se abria con las siete categorias desplegadas: para ver si un centro hace una
 * resonancia habia que bajar por sonografias, tomografias y rayos X. Ahora
 * arrancan cerradas y se abren al pulsarlas o al buscar.
 *
 * Mismo tratamiento que el catalogo del portal del centro: los botones caben
 * varios por fila, y el que se abre se lleva la fila entera para su lista. */
.cd-buscador { display: flex; align-items: center; gap: 10px; margin: 10px 0 8px; }
.cd-buscador input {
  flex: 1 1 auto; min-width: 0;
  padding: 8px 12px; font-size: 13px; font-family: inherit;
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
  background: var(--bg-surface); color: var(--slate-900);
}
.cd-buscador input:focus { outline: 2px solid var(--primary-400); outline-offset: -1px; }
.cd-buscador-cuenta { font-size: 12px; font-weight: 700; color: var(--slate-600); white-space: nowrap; }

.cd-categorias {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 6px;
  align-items: start;
}
.cd-grupo[open] { grid-column: 1 / -1; }

.cd-grupo summary {
  cursor: pointer; padding: 10px 13px; font-size: 13px; font-weight: 700; color: var(--slate-800);
  /* Nombre de categoria y cuantos estudios tiene, juntos. */
  display: flex; justify-content: flex-start; align-items: center; gap: 6px;
  min-height: 24px;
}
.cd-grupo summary:focus-visible { outline: 2px solid var(--primary-400); outline-offset: -2px; }
.cd-grupo-n { font-family: ui-monospace, monospace; font-size: 12px; color: var(--slate-500); }

.cd-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 8px; padding: 0 13px 12px; align-items: stretch;
}
.cd-estudio-tarjeta {
  display: flex; flex-direction: column; gap: 7px;
  padding: 10px; border-radius: var(--radius-sm);
  background: var(--slate-50); border: 1px solid var(--border-color);
}
.cd-estudio-tarjeta > strong { font-size: 12.5px; line-height: 1.35; color: var(--slate-900); overflow-wrap: anywhere; }
.cd-estudio-pie { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: auto; }
.cd-precio { font-size: 13px; font-weight: 800; color: var(--slate-900); font-variant-numeric: tabular-nums; }
.cd-dato { font-size: 12px; color: var(--slate-500); white-space: nowrap; }
.cd-contraste {
  font-style: normal; font-size: 12px; font-weight: 700; color: var(--warning-700);
  background: var(--warning-50); padding: 2px 7px; border-radius: 999px;
}
.cd-nada { font-size: 12.5px; color: var(--slate-500); text-align: center; padding: 18px 6px; }

@media (max-width: 560px) {
  .cd-rejilla { grid-template-columns: minmax(0, 1fr); }
}
.cd-grupo li { display: flex; align-items: center; gap: 10px; }
.cd-estudio { flex: 1; min-width: 0; }
.cd-estudio strong { display: block; font-size: 12.5px; color: var(--slate-800); font-weight: 600; }
.cd-estudio span { font-size: 12px; color: var(--slate-500); }
.cd-precio { font-size: 12.5px; font-weight: 800; color: var(--slate-900); white-space: nowrap; }
.cd-pedir {
  flex-shrink: 0; border: 1px solid var(--primary-300); background: var(--primary-50);
  color: var(--primary-800); border-radius: var(--radius-md); padding: 6px 11px;
  min-height: 26px; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 700;
}
.cd-pedir:hover { background: var(--primary-100); }
.centro-detalle-nota {
  display: flex; gap: 8px; align-items: flex-start; margin: 16px 0 0;
  font-size: 12px; color: var(--slate-600); background: var(--slate-50);
  border-radius: var(--radius-md); padding: 10px 12px;
}

/* --- Marcador del mapa ------------------------------------------------ */
.centro-map-pin {
  position: relative; display: flex; flex-direction: column; align-items: center;
  cursor: pointer; transform: translate(-50%, -100%);
}
.centro-map-icono {
  width: 40px; height: 40px; border-radius: var(--radius-md); border: 3px solid #7c3aed;
  background: var(--bg-surface); color: #7c3aed; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(124, 58, 237, .45);
}
.centro-map-icono i, .centro-map-icono svg { width: 20px; height: 20px; }
.centro-map-nombre {
  background: #7c3aed; color: #fff; font-size: 12px; font-weight: 800;
  padding: 2px 8px; border-radius: 10px; margin-top: -6px; z-index: 2;
  box-shadow: 0 2px 6px rgba(0,0,0,.25); white-space: nowrap;
  max-width: 120px; overflow: hidden; text-overflow: ellipsis;
}
.centro-map-flecha {
  width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-top: 7px solid #7c3aed; margin-top: -1px;
}

/* --- Asistente de solicitud ------------------------------------------- */
.sol-est-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.sol-est-cab h3 { font-size: 16px; font-weight: 800; color: var(--slate-900); margin: 0; }
.sol-est-cab p { font-size: 12.5px; color: var(--slate-500); margin: 2px 0 0; }
.se-progreso { display: flex; gap: 6px; margin: 14px 0 16px; }
.se-punto { flex: 1; height: 4px; border-radius: 999px; background: var(--slate-200); }
.se-punto.hecho { background: var(--primary-400); }
.se-punto.activo { background: var(--primary-600); }
.se-titulo { font-size: 15px; font-weight: 800; color: var(--slate-900); margin: 0 0 4px; }
.se-nota { font-size: 12.5px; color: var(--slate-600); margin: 0 0 14px; }
.se-buscador {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border-color);
  border-radius: var(--radius-md); font-family: inherit; font-size: 13px; margin-bottom: 10px;
}
.se-lista { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.se-opcion {
  display: flex; align-items: center; gap: 10px; text-align: left;
  border: 1px solid var(--border-color); background: var(--bg-surface);
  border-radius: var(--radius-md); padding: 11px 13px; cursor: pointer; font-family: inherit;
}
.se-opcion.elegida { border-color: var(--primary-500); background: var(--primary-50); }
.se-opcion-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.se-opcion-texto strong { font-size: 13px; font-weight: 700; color: var(--slate-900); }
.se-opcion-texto em { font-style: normal; font-size: 12px; color: var(--slate-500); }
.se-opcion-precio { font-size: 12.5px; font-weight: 800; color: var(--slate-800); white-space: nowrap; }

.se-subida {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  border: 2px dashed var(--border-color); border-radius: var(--radius-lg);
  padding: 20px 16px; color: var(--slate-500); background: var(--slate-50);
}
.se-subida:hover { border-color: var(--primary-400); background: var(--primary-50); }
.se-subida.con-archivo { border-style: solid; border-color: var(--accent-600); background: var(--success-50); color: var(--success-700); }
.se-subida-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.se-subida-texto strong { font-size: 13px; font-weight: 700; }
.se-subida-texto em { font-style: normal; font-size: 12px; opacity: .85; }
.se-error { font-size: 12px; font-weight: 700; color: var(--danger-700); margin: 8px 0 0; }
.se-campo { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.se-campo label { display: flex; align-items: baseline; gap: 6px; }
.se-campo label span { font-size: 12px; font-weight: 700; color: var(--slate-700); }
.se-campo label em { font-style: normal; font-size: 12px; color: var(--slate-500); }
.se-campo input, .se-campo select {
  padding: 10px 12px; border: 1px solid var(--border-color); border-radius: var(--radius-md);
  font-family: inherit; font-size: 13px; background: var(--bg-surface); color: var(--slate-900);
}
.se-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.se-preparacion {
  margin-top: 14px; padding: 11px 13px; background: var(--warning-50);
  border: 1px solid #fde68a; border-radius: var(--radius-md);
}
.se-preparacion strong { display: block; font-size: 12.5px; color: var(--warning-700); }
.se-preparacion p { font-size: 12px; color: var(--warning-700); margin: 4px 0; opacity: .9; }
.se-preparacion em { font-style: normal; font-size: 12px; color: var(--warning-700); opacity: .75; }

.se-dias { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 7px; }
.se-dia {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  border: 1px solid var(--border-color); background: var(--bg-surface);
  border-radius: var(--radius-md); padding: 8px 4px; cursor: pointer; font-family: inherit;
  min-height: 26px;
}
.se-dia.elegido { border-color: var(--primary-500); background: var(--primary-50); }
.se-dia-semana { font-size: 12px; color: var(--slate-500); text-transform: capitalize; }
.se-dia-num { font-size: 16px; font-weight: 800; color: var(--slate-900); }
.se-dia-mes { font-size: 12px; color: var(--slate-500); text-transform: capitalize; }
.se-franjas { display: flex; flex-direction: column; gap: 7px; }
.se-franja {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left;
  border: 1px solid var(--border-color); background: var(--bg-surface);
  border-radius: var(--radius-md); padding: 11px 13px; cursor: pointer; font-family: inherit;
}
.se-franja.elegida { border-color: var(--primary-500); background: var(--primary-50); }
.se-franja strong { font-size: 13px; font-weight: 700; color: var(--slate-900); }
.se-franja em { font-style: normal; font-size: 12px; color: var(--slate-500); }
.se-textarea {
  width: 100%; padding: 11px 12px; border: 1px solid var(--border-color);
  border-radius: var(--radius-md); font-family: inherit; font-size: 13px; resize: vertical;
}
.se-resumen {
  margin-top: 16px; padding: 13px 15px; background: var(--slate-50);
  border-radius: var(--radius-md);
}
.se-resumen-titulo {
  display: block; font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: var(--slate-500); margin-bottom: 9px;
}
.se-resumen dl { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.se-resumen dl > div { display: flex; gap: 10px; align-items: baseline; }
.se-resumen dt { font-size: 12px; color: var(--slate-500); min-width: 90px; flex-shrink: 0; }
.se-resumen dd { margin: 0; font-size: 12.5px; color: var(--slate-800); font-weight: 600; }
.se-resumen-nota {
  margin: 11px 0 0; padding-top: 10px; border-top: 1px solid var(--border-color);
  font-size: 12px; color: var(--slate-600);
}
.se-pie { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }
.se-pie .btn { min-height: 44px; padding: 12px 22px; font-weight: 800; }
.se-exito { text-align: center; padding: 12px 0; }
.se-exito-icono {
  width: 56px; height: 56px; border-radius: 50%; background: var(--success-50); color: var(--success-700);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;
}
.se-exito h4 { font-size: 17px; font-weight: 800; color: var(--slate-900); margin: 0 0 4px; }
.se-exito-codigo {
  font-family: ui-monospace, monospace; font-size: 15px; font-weight: 700;
  color: var(--primary-700); background: var(--primary-50);
  display: inline-block; padding: 4px 12px; border-radius: 999px; margin: 0 0 12px;
}
.se-exito p { font-size: 13px; color: var(--slate-600); margin: 0 0 8px; }
.se-exito-seguimiento { font-size: 12.5px; color: var(--slate-500); }

/* --- Mis estudios ------------------------------------------------------ */
.mis-citas-pestanas {
  display: flex; gap: 4px; padding: 12px 16px 0; border-bottom: 1px solid var(--border-color);
}
.mis-citas-pestana {
  background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 700; color: var(--slate-500);
  padding: 9px 14px; min-height: 44px;
}
.mis-citas-pestana.activa { color: var(--primary-700); border-bottom-color: var(--primary-600); }
.mis-est-cargando { font-size: 13px; color: var(--slate-500); text-align: center; padding: 24px 0; }
.mis-est-vacio {
  text-align: center; padding: 40px 20px; background: var(--bg-surface);
  border: 1px dashed var(--border-color); border-radius: var(--radius-lg); color: var(--slate-500);
}
.mis-est-vacio h4 { font-size: 15px; font-weight: 800; color: var(--slate-700); margin: 12px 0 6px; }
.mis-est-vacio p { font-size: 13px; color: var(--slate-500); margin: 0; }
.mis-est-tarjeta {
  background: var(--bg-surface); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: 15px; margin-bottom: 12px; box-shadow: var(--shadow-sm);
}
.mis-est-tarjeta.cancelada, .mis-est-tarjeta.sin-respuesta { opacity: .78; }
.mis-est-tarjeta > header { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.mis-est-tarjeta h4 { font-size: 14px; font-weight: 800; color: var(--slate-900); margin: 0; }
.mis-est-codigo { font-family: ui-monospace, monospace; font-size: 12px; color: var(--slate-500); margin: 2px 0 0; }
.mis-est-estado {
  flex-shrink: 0; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px;
  background: var(--slate-100); color: var(--slate-700);
}
.mis-est-estado.info { background: var(--primary-50); color: var(--primary-700); }
.mis-est-estado.exito { background: var(--success-50); color: var(--success-700); }
.mis-est-estado.aviso { background: var(--warning-50); color: var(--warning-700); }
.mis-est-estado.error { background: var(--danger-50); color: var(--danger-700); }
.mis-est-camino { list-style: none; margin: 14px 0 0; padding: 0; display: flex; gap: 4px; }
.mis-est-camino li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; position: relative; }
.mis-est-camino li::before {
  content: ''; position: absolute; top: 9px; left: -50%; width: 100%; height: 2px;
  background: var(--slate-200);
}
.mis-est-camino li:first-child::before { display: none; }
.mis-est-camino li.hecho::before, .mis-est-camino li.aqui::before { background: var(--primary-400); }
.mis-est-punto {
  width: 18px; height: 18px; border-radius: 50%; background: var(--slate-200);
  color: #fff; font-size: 12px; font-weight: 800; z-index: 1;
  display: flex; align-items: center; justify-content: center;
}
.mis-est-camino li.hecho .mis-est-punto { background: var(--primary-500); }
.mis-est-camino li.aqui .mis-est-punto { background: var(--primary-600); box-shadow: 0 0 0 4px var(--primary-100); }
.mis-est-paso { font-size: 12px; color: var(--slate-500); text-align: center; line-height: 1.2; }
.mis-est-camino li.aqui .mis-est-paso { color: var(--primary-700); font-weight: 700; }
.mis-est-motivo {
  margin: 12px 0 0; font-size: 12.5px; color: var(--slate-600);
  background: var(--slate-50); border-radius: var(--radius-md); padding: 10px 12px;
}
.mis-est-cita { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--border-color-subtle); }
.mis-est-cuando { display: flex; align-items: center; gap: 7px; color: var(--primary-700); font-size: 13.5px; }
.mis-est-cuando strong { text-transform: capitalize; }
.mis-est-precio { display: flex; justify-content: space-between; align-items: baseline; margin-top: 9px; }
.mis-est-precio span { font-size: 12px; color: var(--slate-500); }
.mis-est-precio strong { font-size: 16px; font-weight: 800; color: var(--slate-900); }
.mis-est-cobertura { font-size: 12px; color: var(--slate-600); margin: 5px 0 0; }
.mis-est-preparacion {
  margin-top: 11px; padding: 11px 13px; background: var(--warning-50);
  border: 1px solid #fde68a; border-radius: var(--radius-md);
}
.mis-est-preparacion strong { display: block; font-size: 12.5px; color: var(--warning-700); margin-bottom: 3px; }
.mis-est-preparacion p { font-size: 12px; color: var(--warning-700); margin: 0; opacity: .92; }
.mis-est-resultados {
  display: flex; align-items: center; gap: 8px; margin: 12px 0 0;
  font-size: 12.5px; font-weight: 700; color: var(--success-700);
  background: var(--success-50); border-radius: var(--radius-md); padding: 10px 12px;
}

@media (max-width: 480px) {
  .se-fila { grid-template-columns: 1fr; }
  .se-resumen dl > div { flex-direction: column; gap: 1px; }
  .se-resumen dt { min-width: 0; }
  .centro-card-pie { flex-direction: column; align-items: stretch; gap: 9px; }
  .centro-card-acciones { display: flex; gap: 8px; }
  .centro-card-acciones > * { flex: 1; }
}

/* ====================================================================
   PANEL DEL ADMINISTRADOR — centros y facturación (JEA-215, fase 4)
   ==================================================================== */

.cm-cargando, .cm-vacio {
  font-size: 13px; color: var(--slate-500); padding: 20px 0; text-align: center;
}
.cm-bloque { margin-top: 22px; }
.cm-bloque h3 {
  font-size: 15px; font-weight: 800; color: var(--slate-900); margin: 0 0 12px;
  display: flex; align-items: center; gap: 8px;
}
.cm-cuenta {
  font-family: ui-monospace, monospace; font-size: 12px; font-weight: 700;
  color: var(--primary-700); background: var(--primary-50);
  min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
}
.cm-subtitulo {
  display: block; font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: var(--slate-500); margin-bottom: 8px;
}

/* --- La alerta de las 24 horas -------------------------------------- */
.cm-alerta {
  display: flex; align-items: center; gap: 12px; margin-top: 16px;
  padding: 14px 16px; border-radius: var(--radius-md);
  background: var(--danger-50); border: 1px solid #fecaca; color: var(--danger-700);
}
.cm-alerta i { flex-shrink: 0; }
.cm-alerta div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cm-alerta strong { font-size: 13px; }
.cm-alerta span { font-size: 12px; opacity: .9; }
.cm-alerta .btn { flex-shrink: 0; }

/* --- Solicitudes de acceso ------------------------------------------ */
.cm-accesos { display: flex; flex-direction: column; gap: 10px; }
.cm-acceso {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--bg-surface); border: 1px solid var(--border-color);
  border-left: 3px solid var(--warning-500, #d97706);
  border-radius: var(--radius-md); padding: 15px 17px;
}
.cm-acceso-datos { flex: 1; min-width: 0; }
.cm-acceso-datos strong { display: block; font-size: 14px; font-weight: 800; color: var(--slate-900); }
.cm-acceso-datos > span { font-size: 12.5px; color: var(--slate-500); }
.cm-acceso-datos dl { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.cm-acceso-datos dl > div { display: flex; gap: 7px; align-items: baseline; }
.cm-acceso-datos dt { font-size: 12px; font-weight: 700; color: var(--slate-500); }
.cm-acceso-datos dd { margin: 0; font-size: 12.5px; color: var(--slate-800); }
.cm-mensaje {
  margin: 10px 0 0; padding: 9px 11px; background: var(--slate-50);
  border-radius: var(--radius-sm); font-size: 12.5px; color: var(--slate-600);
}
.cm-ver-licencia {
  margin-top: 10px; background: none; border: 1px solid var(--border-color);
  border-radius: var(--radius-sm); padding: 6px 11px; min-height: 26px; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 700; color: var(--primary-700);
}
.cm-ver-licencia:hover { background: var(--primary-50); border-color: var(--primary-300); }
.cm-sin-licencia { display: inline-block; margin-top: 10px; font-size: 12px; color: var(--warning-600); font-weight: 700; }
.cm-acceso-acciones { display: flex; flex-direction: column; gap: 7px; flex-shrink: 0; }
.cm-acceso-acciones .btn { min-height: 34px; white-space: nowrap; }

/* --- Tabla de centros ------------------------------------------------ */
.cm-nombre { display: block; font-size: 13px; font-weight: 700; color: var(--slate-900); }
.cm-id { display: block; font-family: ui-monospace, monospace; font-size: 12px; color: var(--slate-500); }
.cm-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cm-num.fuerte { font-weight: 800; color: var(--slate-900); }
.cm-num.malo { color: var(--danger-700); font-weight: 700; }
.cm-acc { width: 46px; text-align: right; }
.cm-ficha {
  width: 26px; height: 26px; border-radius: var(--radius-sm); border: 0; cursor: pointer;
  background: transparent; color: var(--slate-500);
  display: inline-flex; align-items: center; justify-content: center;
}
.cm-ficha:hover { background: var(--primary-50); color: var(--primary-600); }
.cm-estado-exito   { background: var(--success-50); color: var(--success-700); }
.cm-estado-aviso   { background: var(--warning-50); color: var(--warning-700); }
.cm-estado-error   { background: var(--danger-50); color: var(--danger-700); }
.cm-estado-neutral { background: var(--slate-100); color: var(--slate-600); }
.cm-motivo {
  display: block; font-size: 12px; color: var(--slate-500); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px;
}

/* --- Ficha del centro ------------------------------------------------ */
.cm-ficha-datos { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; }
.cm-ficha-datos > div { display: flex; gap: 12px; align-items: baseline; }
.cm-ficha-datos dt { font-size: 12px; font-weight: 700; color: var(--slate-500); min-width: 96px; flex-shrink: 0; }
.cm-ficha-datos dd { margin: 0; font-size: 13px; color: var(--slate-800); }
.cm-historial { margin-bottom: 16px; }
.cm-historial ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.cm-historial li {
  display: flex; gap: 10px; align-items: baseline; font-size: 12px;
  padding: 7px 10px; background: var(--slate-50); border-radius: var(--radius-sm);
}
.cm-h-codigo { font-family: ui-monospace, monospace; font-size: 12px; color: var(--slate-500); flex-shrink: 0; }
.cm-h-estudio { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--slate-800); }
.cm-h-estado { font-weight: 700; color: var(--primary-700); flex-shrink: 0; }
.cm-h-precio { font-variant-numeric: tabular-nums; color: var(--slate-700); flex-shrink: 0; }
.cm-ficha-acciones { border-top: 1px solid var(--border-color); padding-top: 14px; }
.cm-botones { display: flex; gap: 8px; flex-wrap: wrap; }
.cm-estado-btn {
  border: 1px solid var(--primary-300); background: var(--primary-50); color: var(--primary-800);
  border-radius: var(--radius-md); padding: 8px 14px; min-height: 26px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 700;
}
.cm-estado-btn.peligro { border-color: var(--danger-200); background: var(--danger-50); color: var(--danger-700); }
.cm-aviso-perfil {
  margin: 11px 0 0; padding: 9px 11px; font-size: 12px;
  background: var(--warning-50); border: 1px solid #fde68a; border-radius: var(--radius-md); color: var(--warning-700);
}

/* --- Facturación ------------------------------------------------------ */
.fe-comisiones { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.fe-comisiones label { display: flex; flex-direction: column; gap: 5px; }
.fe-comisiones label > span { font-size: 12px; font-weight: 700; color: var(--slate-700); }
.fe-comisiones label > div { display: flex; align-items: center; gap: 6px; }
.fe-comisiones input {
  width: 92px; padding: 9px 11px; border: 1px solid var(--border-color);
  border-radius: var(--radius-md); font-family: inherit; font-size: 14px; font-weight: 700;
}
.fe-comisiones em { font-style: normal; font-size: 14px; font-weight: 700; color: var(--slate-500); }
.fe-nota {
  display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0;
  font-size: 12px; color: var(--slate-600); background: var(--slate-50);
  border-radius: var(--radius-md); padding: 11px 13px;
}
.fe-nota i { flex-shrink: 0; margin-top: 1px; }
.fe-cabecera { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.fe-periodo { display: flex; gap: 10px; align-items: flex-end; }
.fe-periodo label { display: flex; flex-direction: column; gap: 4px; }
.fe-periodo span { font-size: 12px; font-weight: 700; color: var(--slate-500); }
.fe-periodo input {
  padding: 7px 10px; border: 1px solid var(--border-color);
  border-radius: var(--radius-md); font-family: inherit; font-size: 12.5px;
}

/* --- El consolidado del resumen general ------------------------------- */
.dash-estudios { margin-bottom: 20px; }
.dash-estudios-cab { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.dash-estudios-cab h4 {
  display: flex; align-items: center; gap: 7px;
  font-size: 15px; font-weight: 800; color: var(--slate-900); margin: 0;
}
.dash-estudios-cab span { font-size: 12px; color: var(--slate-500); }
.kpi-sub { display: block; font-size: 12px; color: var(--slate-500); margin-top: 3px; }

@media (max-width: 767px) {
  .cm-acceso { flex-direction: column; }
  .cm-acceso-acciones { flex-direction: row; width: 100%; }
  .cm-acceso-acciones .btn { flex: 1; }
  .fe-cabecera { flex-direction: column; align-items: stretch; }
}

/* Fallo al cargar el tablero. Mismo criterio que en el portal del medico:
   un mensaje que se puede leer y copiar vale mas que un "algo fallo". */
.centro-fallo {
  margin: 16px 0;
  padding: 20px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-left: 3px solid #f59e0b;
  border-radius: var(--radius-lg);
}
.centro-fallo h4 { font-size: 14px; font-weight: 800; color: var(--slate-900); margin-bottom: 5px; }
.centro-fallo p { font-size: 12.5px; color: var(--slate-600); margin-bottom: 10px; }
.centro-fallo code {
  display: block; font-size: 12px; color: var(--slate-700);
  background: var(--slate-50); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); padding: 8px 10px; margin-bottom: 12px;
  overflow-wrap: anywhere;
}

/* --- Subir el informe ------------------------------------------------ */
.res-panel {
  max-width: 460px; width: 100%; background: var(--bg-surface);
  border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-lg);
}
.res-cab { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 4px; }
.res-cab h3 { font-size: 17px; font-weight: 800; color: var(--slate-900); }
.res-para { font-size: 13px; color: var(--slate-600); margin-bottom: 16px; }
.res-para strong { color: var(--slate-900); }
.res-codigo {
  font-size: 12px; font-weight: 800; color: var(--primary-700);
  background: var(--primary-50); padding: 2px 7px; border-radius: 999px; margin-left: 6px;
}
.res-campo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.res-campo > span { font-size: 12px; font-weight: 700; color: var(--slate-700); }
.res-campo > span em { font-style: normal; font-weight: 500; color: var(--slate-500); }
.res-campo input[type="file"] {
  font-size: 12.5px; padding: 9px; border: 1px dashed var(--border-color);
  border-radius: var(--radius-md); background: var(--slate-50); width: 100%;
}
.res-campo textarea {
  font-size: 13px; padding: 9px 11px; border: 1px solid var(--border-color);
  border-radius: var(--radius-md); resize: vertical; font-family: inherit; width: 100%;
}
.res-elegido {
  font-size: 12px; color: var(--accent-600); font-weight: 700;
  margin: -8px 0 14px; overflow-wrap: anywhere;
}
.res-avisar { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--slate-700); margin-bottom: 14px; cursor: pointer; }
.res-avisar input { width: 17px; height: 17px; flex-shrink: 0; }
.res-error {
  font-size: 12.5px; color: var(--danger-700); background: var(--danger-50);
  border: 1px solid #fecaca; border-radius: var(--radius-md);
  padding: 8px 11px; margin-bottom: 12px;
}
.res-acciones { display: flex; gap: 8px; justify-content: flex-end; }
.res-acciones .btn { min-height: 40px; }

/* El informe, en la pantalla del paciente */
.mis-est-informe {
  display: flex; align-items: center; gap: 10px;
  background: var(--accent-50, #ecfdf5); border: 1px solid var(--accent-200, #a7f3d0);
  border-radius: var(--radius-md); padding: 11px 13px; margin-top: 10px;
}
.mis-est-informe .btn { margin-left: auto; flex-shrink: 0; }
.mis-est-informe > span { font-size: 12.5px; color: var(--slate-700); min-width: 0; }
@media (max-width: 420px) {
  .mis-est-informe { flex-wrap: wrap; }
  .mis-est-informe .btn { margin-left: 0; width: 100%; justify-content: center; }
}

/* --- Resumen / Tablero ------------------------------------------------ */
.vista-cambio {
  display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 14px;
  background: var(--slate-100); border-radius: var(--radius-md);
}
.vista-btn {
  border: 0; background: transparent; cursor: pointer;
  font-size: 12.5px; font-weight: 700; color: var(--slate-500);
  padding: 7px 16px; border-radius: calc(var(--radius-md) - 2px);
  min-height: 32px;
}
.vista-btn.activa { background: var(--bg-surface); color: var(--primary-700); box-shadow: var(--shadow-sm); }

/* La rejilla de estados. `auto-fill` con un mínimo de 210px da 5 o 6 en
   escritorio y una sola columna en móvil, sin puntos de ruptura a mano. */
.res-rejilla {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.res-estado {
  display: flex; flex-direction: column; gap: 8px; text-align: left;
  background: var(--bg-surface); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: 13px; cursor: pointer;
  font-family: inherit; transition: border-color .15s, box-shadow .15s;
}
.res-estado:hover:not(:disabled) { border-color: var(--primary-300); box-shadow: var(--shadow-sm); }
.res-estado:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; }
.res-estado.vacio { opacity: .5; cursor: default; background: var(--slate-50); }
.res-estado-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.res-estado-nombre { font-size: 12.5px; font-weight: 800; color: var(--slate-700); min-width: 0; overflow-wrap: anywhere; }
.res-estado-n {
  font-size: 17px; font-weight: 800; color: var(--slate-800);
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.res-estado.marcado { border-color: var(--primary-400); background: var(--primary-50); }
.res-estado.marcado .res-estado-n { color: var(--primary-700); }
.res-estado.con-prisa { border-color: var(--warning-500); background: var(--warning-50); }
.res-estado.con-prisa .res-estado-n { color: var(--warning-600); }
.res-estado-nada { font-size: 12px; color: var(--slate-500); }
.res-previa { display: flex; flex-direction: column; gap: 5px; border-top: 1px solid var(--border-color-subtle, #f1f5f9); padding-top: 8px; }
.res-previa-fila { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.res-previa-fila strong { font-size: 12px; font-weight: 700; color: var(--slate-800); overflow-wrap: anywhere; }
.res-previa-fila em {
  font-style: normal; font-size: 12px; color: var(--slate-500);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.res-previa-fila > span { font-size: 12px; color: var(--slate-500); }
.res-previa-mas { font-size: 12px; font-weight: 700; color: var(--primary-600); }

/* La lista de un estado */
.res-detalle-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.res-detalle-cab h4 { font-size: 15px; font-weight: 800; color: var(--slate-900); display: flex; align-items: center; gap: 8px; }
.res-detalle-n {
  font-size: 12px; font-weight: 800; color: var(--primary-700);
  background: var(--primary-50); padding: 2px 9px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.res-volver {
  display: inline-flex; align-items: center; gap: 5px;
  background: transparent; border: 1px solid var(--border-color);
  border-radius: var(--radius-md); padding: 6px 11px; min-height: 32px;
  font-size: 12.5px; font-weight: 700; color: var(--slate-600); cursor: pointer;
}
.res-volver:hover { border-color: var(--primary-300); color: var(--primary-700); }
.res-buscar {
  width: 100%; font-size: 13px; padding: 10px 12px; margin-bottom: 12px;
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
}
.res-buscar:focus { outline: 2px solid var(--primary-400); outline-offset: -1px; }
.res-lista { display: flex; flex-direction: column; gap: 8px; }
.res-lista .kanban-tarjeta { width: 100%; }
.res-nada { font-size: 13px; color: var(--slate-500); text-align: center; padding: 24px 12px; }
.res-estado.caido { border-color: #f4b8b8; background: #fef6f6; }
.res-estado.caido .res-estado-n { color: var(--danger-700); }
.res-estado.caido .res-estado-nombre { color: #991b1b; }

/* "Luis tiene esta ficha abierta ahora mismo."
   Aviso, no cerradura: se lee y se sigue trabajando, así que va discreto —un
   bloque en rojo diría "no pases", y aquí sí se puede pasar. */
.ficha-presencia {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--warning-700);
  background: var(--warning-50); border: 1px solid #fde68a;
  border-radius: var(--radius-md); padding: 8px 11px; margin-bottom: 12px;
}
.ficha-presencia::before { content: '👀'; flex-shrink: 0; }

/* --- Equipo del centro ------------------------------------------------ */
.eq-intro { font-size: 12.5px; color: var(--slate-600); margin-bottom: 14px; line-height: 1.5; }
.eq-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.eq-fila {
  display: grid; gap: 10px; align-items: center;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) auto;
  padding: 12px 13px; background: var(--slate-50);
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
}
.eq-fila.inactivo { opacity: .6; background: var(--bg-surface); border-style: dashed; }
.eq-quien { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.eq-quien strong { font-size: 13px; font-weight: 700; color: var(--slate-900); overflow-wrap: anywhere; }
.eq-email { font-size: 12px; color: var(--slate-500); overflow-wrap: anywhere; }
.eq-visto { font-size: 12px; color: var(--slate-500); }
.eq-rol { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.eq-select {
  font-size: 12.5px; padding: 6px 9px; min-height: 32px;
  border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-surface);
}
.eq-rol-fijo { font-size: 12.5px; font-weight: 700; color: var(--slate-700); }
.eq-rol-que { font-size: 12px; color: var(--slate-500); line-height: 1.35; }
.eq-acciones { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.eq-btn {
  font-size: 12px; font-weight: 700; padding: 7px 12px; min-height: 32px;
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
  background: var(--bg-surface); color: var(--slate-700); cursor: pointer; white-space: nowrap;
}
.eq-btn:hover { border-color: var(--primary-300); color: var(--primary-700); }
.eq-btn.peligro { color: var(--danger-700); border-color: var(--danger-200); }
.eq-btn.peligro:hover { background: var(--danger-50); border-color: #f87171; }
.eq-baja { font-size: 12px; font-weight: 700; color: var(--danger-700); }
.eq-protegido { font-size: 12px; color: var(--slate-500); font-style: italic; white-space: nowrap; }
.eq-invitar {
  font-size: 12px; color: var(--slate-500); line-height: 1.5;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-color);
}
@media (max-width: 620px) {
  .eq-fila { grid-template-columns: 1fr; }
  .eq-acciones { align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
}

/* --- Historial -------------------------------------------------------- */
.hist-filtros {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border-color);
}
.hist-filtros label { display: flex; flex-direction: column; gap: 3px; }
.hist-filtros label > span { font-size: 12px; font-weight: 700; color: var(--slate-600); }
.hist-filtros input, .hist-filtros select {
  font-size: 12.5px; padding: 7px 9px; min-height: 34px;
  border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-surface);
}
.hist-limpiar, .hist-csv {
  font-size: 12px; font-weight: 700; padding: 8px 13px; min-height: 34px;
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
  background: var(--bg-surface); color: var(--slate-700); cursor: pointer; white-space: nowrap;
}
.hist-csv { color: var(--primary-700); border-color: var(--primary-200); }
.hist-csv:hover:not(:disabled) { background: var(--primary-50); }
.hist-csv:disabled { opacity: .5; cursor: default; }
.hist-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.hist-fila {
  display: grid; gap: 10px; align-items: baseline;
  grid-template-columns: 150px 120px minmax(0, 1fr);
  padding: 10px 0; border-bottom: 1px solid var(--border-color-subtle, #f1f5f9);
}
.hist-fila:last-child { border-bottom: none; }
.hist-cuando { font-size: 12px; color: var(--slate-500); font-variant-numeric: tabular-nums; }
.hist-tipo {
  font-size: 12px; font-weight: 700; color: var(--slate-600);
  background: var(--slate-100); padding: 2px 8px; border-radius: 999px;
  justify-self: start; white-space: nowrap;
}
.hist-fila.tipo-equipo .hist-tipo { background: var(--primary-50); color: var(--primary-700); }
.hist-fila.tipo-banco  .hist-tipo { background: #fef3c7; color: var(--warning-700); }
.hist-que { font-size: 12.5px; color: var(--slate-700); min-width: 0; overflow-wrap: anywhere; }
.hist-que strong { color: var(--slate-900); font-weight: 700; margin-right: 5px; }
.hist-nota { display: block; font-style: normal; font-size: 12px; color: var(--slate-500); margin-top: 2px; }
.hist-nada { font-size: 13px; color: var(--slate-500); text-align: center; padding: 28px 12px; }
.hist-mas {
  display: block; width: 100%; margin-top: 14px; padding: 10px; min-height: 40px;
  font-size: 12.5px; font-weight: 700; color: var(--primary-700);
  background: var(--primary-50); border: 1px solid var(--primary-200);
  border-radius: var(--radius-md); cursor: pointer;
}
@media (max-width: 620px) {
  .hist-fila { grid-template-columns: 1fr; gap: 3px; }
  .hist-filtros label { flex: 1 1 130px; }
  .hist-filtros input, .hist-filtros select { width: 100%; }
}

/* --- Seguridad -------------------------------------------------------- */
.cs-sesion { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 12px; }
.cs-sesion > div { display: flex; flex-direction: column; gap: 1px; }
.cs-sesion dt { font-size: 12px; font-weight: 700; color: var(--slate-500); text-transform: uppercase; letter-spacing: .04em; }
.cs-sesion dd { font-size: 13px; color: var(--slate-800); margin: 0; overflow-wrap: anywhere; }
.cs-nota { font-size: 12px; color: var(--slate-600); line-height: 1.55; margin-bottom: 12px; }
.cs-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cs-fila {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; background: var(--slate-50);
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
}
.cs-quien { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cs-quien strong { font-size: 13px; font-weight: 700; color: var(--slate-900); overflow-wrap: anywhere; }
.cs-quien span { font-size: 12px; color: var(--slate-500); overflow-wrap: anywhere; }
.cs-reiniciar {
  font-size: 12px; font-weight: 700; padding: 7px 12px; min-height: 32px;
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
  background: var(--bg-surface); color: var(--primary-700); cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.cs-reiniciar:hover:not(:disabled) { border-color: var(--primary-300); background: var(--primary-50); }
.cs-reiniciar:disabled { opacity: .6; cursor: default; }
@media (max-width: 480px) {
  .cs-fila { flex-direction: column; align-items: stretch; }
  .cs-reiniciar { width: 100%; }
}

/* --- Alta de usuarios ------------------------------------------------- */
.eq-alta { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-color); }
.eq-alta h5 { font-size: 13px; font-weight: 800; color: var(--slate-800); margin-bottom: 10px; }
.eq-alta-campos { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
/* Las tallas de `.campo-*` mandan sobre el reparto por defecto (JEA-221): el
   correo pide mas sitio que el rol, y el rol mas que nada. */
.eq-alta-campos label { display: flex; flex-direction: column; gap: 3px; flex: 2 1 150px; min-width: 0; }
.eq-alta-campos label.campo-sm { flex-grow: 2; flex-basis: 120px; }
.eq-alta-campos label.campo-md { flex-grow: 3; }
.eq-alta-campos label.campo-lg { flex-grow: 5; }
@media (max-width: 768px) { .eq-alta-campos label { flex: 1 1 100%; } }
.eq-alta-campos label > span { font-size: 12px; font-weight: 700; color: var(--slate-600); }
.eq-alta-campos input, .eq-alta-campos select {
  font-size: 12.5px; padding: 8px 10px; min-height: 36px; width: 100%;
  border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-surface);
}
.eq-alta-campos .btn { min-height: 36px; flex-shrink: 0; }
.eq-alta-error {
  margin-top: 10px; font-size: 12.5px; color: var(--danger-700);
  background: var(--danger-50); border: 1px solid #fecaca;
  border-radius: var(--radius-md); padding: 8px 11px;
}
.eq-alta-hecho {
  margin-top: 12px; padding: 14px 16px;
  background: var(--accent-50, #ecfdf5); border: 1px solid var(--accent-200, #a7f3d0);
  border-radius: var(--radius-md);
}
.eq-alta-hecho strong { display: block; font-size: 13.5px; color: var(--slate-900); margin-bottom: 3px; }
.eq-alta-hecho > p { font-size: 12px; color: var(--slate-600); margin-bottom: 10px; line-height: 1.5; }
.eq-alta-hecho dl { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.eq-alta-hecho dl > div { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.eq-alta-hecho dt { font-size: 12px; font-weight: 700; color: var(--slate-500); min-width: 74px; text-transform: uppercase; letter-spacing: .03em; }
.eq-alta-hecho dd { font-size: 13px; color: var(--slate-800); margin: 0; overflow-wrap: anywhere; }
.eq-alta-hecho code {
  font-size: 13px; background: var(--bg-surface); border: 1px solid var(--border-color);
  padding: 3px 8px; border-radius: 4px; user-select: all;
}
.eq-alta-botones { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- Sucursales ------------------------------------------------------- */
.centro-sucursales li {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.suc-datos { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.suc-quitar {
  font-size: 12px; font-weight: 700; padding: 5px 11px; min-height: 30px;
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
  background: var(--bg-surface); color: var(--danger-700); cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.suc-quitar:hover:not(:disabled) { background: var(--danger-50); border-color: #f87171; }
.suc-alta { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-color); }
.suc-alta h5 { font-size: 13px; font-weight: 800; color: var(--slate-800); margin-bottom: 10px; }
.suc-campos { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.suc-campos label { display: flex; flex-direction: column; gap: 3px; flex: 1 1 165px; min-width: 0; }
.suc-campos label > span { font-size: 12px; font-weight: 700; color: var(--slate-600); }
.suc-campos input {
  font-size: 12.5px; padding: 8px 10px; min-height: 36px; width: 100%;
  border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-surface);
}
.suc-nota { font-size: 12px; color: var(--slate-500); line-height: 1.5; margin-bottom: 10px; }
.suc-error {
  font-size: 12.5px; color: var(--danger-700); background: var(--danger-50); border: 1px solid #fecaca;
  border-radius: var(--radius-md); padding: 8px 11px; margin-bottom: 10px;
}
@media (max-width: 480px) {
  .centro-sucursales li { flex-direction: column; }
  .suc-quitar { width: 100%; }
}


/* Campos de solo lectura del centro (JEA-221).
   RNC y licencia se ven pero no se editan: se verifican fuera. Que se note a
   simple vista que no son editables, y no descubrirlo al intentar escribir. */
/* El `:not(.cat-precio)` no filtra nada aqui --un precio nunca es readonly--;
   esta para igualar la especificidad de la regla de arriba, que lleva dos
   `:not()` y ganaba. Sin el, estos campos se pintaban como los editables y la
   unica pista de que no se pueden tocar era intentarlo. */
.centro-tarjeta input[readonly]:not(.cat-precio) {
  background: var(--slate-100);
  color: var(--slate-600);
  cursor: default;
}
.centro-tarjeta input[readonly]:not(.cat-precio):focus { outline: 1px solid var(--border-color); }
.campos-nota { margin-top: 4px; }

/* Las filas de campos dentro de una tarjeta respiran como lo hacia .sol-fila. */
.centro-tarjeta .campos { margin-bottom: 12px; }


/* =====================================================================
 * CUANDO `justify-content: space-between` ESTORBA
 * =====================================================================
 *
 * `space-between` empuja a los hijos a los extremos. Eso esta bien cuando lo
 * que separa son cosas DISTINTAS --un titulo y su boton de accion, un importe y
 * el boton de transferirlo-- porque el hueco dice "esto de aqui no es lo mismo
 * que eso de alla".
 *
 * Estorba cuando lo que separa son cosas que van JUNTAS:
 *
 *   una etiqueta y su valor      "Lunes"          "8:00 - 17:00"
 *   un nombre y su contador      "Sonografia"                "3/12"
 *
 * Ahi el hueco miente: sugiere que son dos cosas cuando son una sola leida en
 * dos partes. Y crece con el ancho, asi que en una pantalla grande el contador
 * acaba tan lejos de su nombre que hay que buscarlo.
 *
 * La regla: si al leerlo en voz alta dirias las dos partes seguidas, van
 * seguidas. `flex-start` mas un `gap`, y si hay que alinear una columna de
 * valores, un `min-width` en la etiqueta.
 *
 * Corregidos con este criterio: la cabecera de columna del kanban, la cabecera
 * de categoria del catalogo, los horarios de sucursal, y el resumen de
 * categoria del detalle de centro.
 *
 * NO se cambiaron, porque ahi el hueco esta bien: `.centro-cabecera` (titulo y
 * boton de salir), `.centro-card-pie` (precio y acciones), `.suc-cuerpo` (datos
 * y boton de quitar), `.est-tarjeta` (es una columna: empuja el precio al pie),
 * `.resultados-cabecera` (titulo y "Limpiar filtros").
 */


/* Aviso de que el centro no trabaja con el seguro del perfil (JEA-221 fase 3).
   No bloquea: informa y ofrece las dos salidas --seguir como privado o buscar
   otro centro--. Bloquearlo seria decidir por el paciente que no le compensa
   pagar de su bolsillo, y eso no lo sabemos nosotros. */
.se-aviso-seguro {
  margin: 10px 0 0; padding: 9px 11px;
  font-size: 12.5px; line-height: 1.45; color: var(--warning-700);
  background: var(--warning-50); border: 1px solid #fde68a;
  border-radius: var(--radius-md);
}