/* =====================================================================
   Sistema Consultorio Dental - hoja de estilo principal
   Paleta: morado tirando a rosa, sobre Bootstrap 5.
   Todo el color vive en estas variables: cambiar la marca es cambiar
   estas seis lineas, no buscar y reemplazar en 40 archivos.
   ===================================================================== */

:root {
  --morado-900: #4a1d5c;
  --morado-800: #5f2472;
  --morado-700: #7b2d8e;
  --morado-600: #9333a8;
  --morado-500: #a94bbd;
  --morado-400: #c46fd4;
  --rosa-400:   #d96bb0;
  --rosa-300:   #e89ac9;
  --rosa-100:   #f7e6f2;
  --lila-50:    #faf5fc;

  --gris-900: #2b2733;
  --gris-600: #6c6577;
  --gris-300: #d8d2de;
  --gris-100: #f3f0f6;

  --exito:  #2e9e6b;
  --alerta: #d98b1f;
  --error:  #c0392b;

  --radio: 12px;
  --sombra: 0 2px 10px rgba(74, 29, 92, .08);
  --sombra-alta: 0 6px 24px rgba(74, 29, 92, .16);

  /* El sistema es de escritorio: se fija un ancho minimo de trabajo */
  --ancho-min: 1280px;

  /* ---------- Modales ----------
     Que tan difuminado queda el fondo al abrir un modal.
       0px  = sin desenfoque
       2px  = apenas se nota
       4px  = el valor actual
       8px  = el fondo queda ilegible
     La opacidad es la del velo oscuro que va encima. Si subes el
     desenfoque, conviene bajar la opacidad para no oscurecer de mas. */
  --modal-desenfoque: 3px;
  --modal-velo: .15;
}

/* ---------- Base ---------- */
html, body { height: 100%; }

body {
  min-width: var(--ancho-min);
  background: var(--lila-50);
  color: var(--gris-900);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  padding-bottom: 46px;   /* espacio para el footer fijo */
}

a { color: var(--morado-700); }
a:hover { color: var(--morado-500); }

/* ---------- Utilidades de marca ---------- */
.texto-morado { color: var(--morado-700) !important; }
.fondo-morado { background: var(--morado-700) !important; }
.fondo-lila   { background: var(--rosa-100) !important; }

.btn-morado {
  background: var(--morado-700);
  border-color: var(--morado-700);
  color: #fff;
}
.btn-morado:hover, .btn-morado:focus {
  background: var(--morado-800);
  border-color: var(--morado-800);
  color: #fff;
}
.btn-outline-morado {
  color: var(--morado-700);
  border-color: var(--morado-500);
}
.btn-outline-morado:hover {
  background: var(--morado-700);
  border-color: var(--morado-700);
  color: #fff;
}
.btn-rosa {
  background: var(--rosa-400);
  border-color: var(--rosa-400);
  color: #fff;
}
.btn-rosa:hover { background: #c85a9e; border-color: #c85a9e; color: #fff; }

.badge-morado { background: var(--morado-600); color: #fff; }
.badge-suave   { background: var(--rosa-100); color: var(--morado-800); }

/* ---------- Barra de navegacion ---------- */
.navbar-sistema {
  background: linear-gradient(90deg, var(--morado-800) 0%, var(--morado-600) 60%, var(--rosa-400) 100%);
  box-shadow: var(--sombra);
}
.navbar-sistema .navbar-brand {
  color: #fff;
  font-weight: 600;
  letter-spacing: .3px;
}
.navbar-sistema .nav-link {
  color: rgba(255,255,255,.88);
  font-weight: 500;
  padding: .55rem .95rem !important;
  border-radius: 8px;
}
.navbar-sistema .nav-link:hover,
.navbar-sistema .nav-link:focus { color: #fff; background: rgba(255,255,255,.14); }
.navbar-sistema .nav-link.activo { color: #fff; background: rgba(255,255,255,.22); }
.navbar-sistema .dropdown-menu {
  border: 0;
  box-shadow: var(--sombra-alta);
  border-radius: var(--radio);
  padding: .4rem;
}
.navbar-sistema .dropdown-item { border-radius: 8px; padding: .5rem .8rem; }
.navbar-sistema .dropdown-item:hover { background: var(--rosa-100); color: var(--morado-800); }
.navbar-sistema .dropdown-item.activo { background: var(--morado-700); color: #fff; }

.avatar-usuario {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 13px;
}

/* ---------- Menu lateral de modulo ---------- */
.menu-lateral {
  background: #fff;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: .6rem;
  position: sticky;
  top: 76px;
}
.menu-lateral .titulo {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gris-600);
  padding: .5rem .7rem .3rem;
}
.menu-lateral .item {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .75rem;
  border-radius: 9px;
  color: var(--gris-900);
  text-decoration: none;
  font-weight: 500;
}
.menu-lateral .item:hover { background: var(--rosa-100); color: var(--morado-800); }
.menu-lateral .item.activo {
  background: var(--morado-700); color: #fff;
  box-shadow: 0 2px 8px rgba(123,45,142,.3);
}
.menu-lateral .item i { font-size: 1.05rem; }

/* ---------- Tarjetas ---------- */
.card {
  border: 0;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.card-header {
  background: #fff;
  border-bottom: 1px solid var(--gris-100);
  border-radius: var(--radio) var(--radio) 0 0 !important;
  font-weight: 600;
  color: var(--morado-800);
  padding: .85rem 1.1rem;
}
.card-header.morado {
  background: var(--morado-700);
  color: #fff;
}

.titulo-vista {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--morado-800);
  margin: 0;
}
.subtitulo-vista { color: var(--gris-600); font-size: .875rem; margin: 0; }

/* ---------- Tarjeta de identificacion del paciente ---------- */
/* La cinta de color llega hasta el borde, asi que la tarjeta necesita
   recortar lo que sobresale: sin overflow oculto las esquinas de arriba
   se ven cuadradas aunque la tarjeta tenga radio. */
.card-identidad {
  overflow: hidden;
  border-radius: 18px;
}
.card-identidad .cabecera {
  background: linear-gradient(135deg, var(--morado-700), var(--rosa-400));
  height: 76px;
  border-radius: 18px 18px 0 0;
}
.card-identidad .foto {
  width: 104px; height: 104px;
  border-radius: 50%;
  border: 4px solid #fff;
  margin: -52px auto 0;
  background: var(--rosa-100);
  color: var(--morado-700);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; font-weight: 700;
  object-fit: cover;
  box-shadow: var(--sombra);
}
.card-identidad .nombre {
  font-size: 1.25rem; font-weight: 600;
  color: var(--morado-900); text-align: center;
  margin-top: .8rem;
}
.dato-identidad {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .25rem;
  border-bottom: 1px solid var(--gris-100);
}
.dato-identidad:last-child { border-bottom: 0; }
.dato-identidad i { color: var(--morado-500); width: 18px; }
.dato-identidad .etiqueta { color: var(--gris-600); font-size: 12px; }
.dato-identidad .valor { font-weight: 500; }

/* ---------- Pestanias ---------- */
.nav-tabs-morado { border-bottom: 2px solid var(--gris-100); gap: .25rem; }
.nav-tabs-morado .nav-link {
  border: 0; border-bottom: 3px solid transparent;
  color: var(--gris-600); font-weight: 500;
  padding: .7rem 1.1rem; border-radius: 8px 8px 0 0;
}
.nav-tabs-morado .nav-link:hover { color: var(--morado-700); background: var(--lila-50); }
.nav-tabs-morado .nav-link.active {
  color: var(--morado-800);
  background: transparent;
  border-bottom-color: var(--morado-600);
  font-weight: 600;
}

/* ---------- Tablas ---------- */
.tabla-sistema { margin-bottom: 0; }
.tabla-sistema thead th {
  background: var(--rosa-100);
  color: var(--morado-800);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
  border-bottom: 0;
  white-space: nowrap;
  padding: .7rem .85rem;
}
.tabla-sistema tbody td {
  vertical-align: middle;
  padding: .7rem .85rem;
  border-color: var(--gris-100);
}
.tabla-sistema tbody tr:hover { background: var(--lila-50); }
.tabla-sistema .col-acciones { width: 48px; text-align: center; }

.fila-vacia td {
  text-align: center;
  color: var(--gris-600);
  padding: 2.2rem 1rem !important;
}

/* ---------- Formularios ---------- */
.form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--gris-600);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: .3rem;
}
.form-label .req { color: var(--error); }
.form-control, .form-select {
  border-color: var(--gris-300);
  border-radius: 9px;
  padding: .5rem .75rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--morado-500);
  box-shadow: 0 0 0 .2rem rgba(169,75,189,.18);
}
.form-control:disabled, .form-control[readonly] { background: var(--gris-100); }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--error); }

/* ---------- Login ---------- */
.pantalla-login {
  min-width: auto;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--morado-900) 0%, var(--morado-600) 55%, var(--rosa-400) 100%);
  padding: 2rem;
}
.caja-login {
  width: 100%; max-width: 400px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
  padding: 2.4rem 2.2rem;
}
.caja-login .logo {
  width: 64px; height: 64px; margin: 0 auto 1rem;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--morado-700), var(--rosa-400));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.9rem;
}

/* ---------- Footer fijo ---------- */
.footer-sistema {
  position: fixed; bottom: 0; left: 0; right: 0;
  min-width: var(--ancho-min);
  background: var(--morado-900);
  color: rgba(255,255,255,.82);
  font-size: 12px;
  padding: .55rem 1.2rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  z-index: 1030;
}
.footer-sistema .separador { color: rgba(255,255,255,.35); margin: 0 .5rem; }

/* ---------- Avisos y estados ---------- */
.chip-estado {
  display: inline-block;
  padding: .18rem .6rem;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.chip-alerta-clinica {
  background: #fdecea; color: var(--error);
  border: 1px solid #f5c2bd;
}

.cargando {
  display: flex; align-items: center; justify-content: center;
  gap: .6rem; padding: 3rem; color: var(--gris-600);
}

/* Aviso visible solo cuando la pantalla es menor al ancho de trabajo */
.aviso-pantalla-chica { display: none; }
@media (max-width: 1279px) {
  .aviso-pantalla-chica {
    display: block;
    background: var(--alerta);
    color: #fff;
    text-align: center;
    padding: .45rem;
    font-size: 12.5px;
  }
}

/* =====================================================================
   MAYUSCULAS EN LA CAPTURA
   Regla del sistema: todo dato que el usuario teclea se guarda y se
   muestra en mayusculas. Se aplica por CSS para que lo vea al instante,
   y ademas se convierte en JavaScript y en PHP antes de guardar. Los
   tres niveles son necesarios: el CSS es solo apariencia, el JS puede
   saltarse pegando texto, y el servidor es el unico que manda.
   ===================================================================== */
input[type="text"],
input[type="search"],
input[type="tel"],
textarea,
.mayusculas {
  text-transform: uppercase;
}

/* Estos no se transforman: correos, contrasenas y busquedas libres */
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input.sin-mayusculas,
textarea.sin-mayusculas {
  text-transform: none;
}

/* El placeholder se deja legible, en minusculas */
input::placeholder, textarea::placeholder {
  text-transform: none;
  font-variant: normal;
}

/* =====================================================================
   MODALES: desenfocar el fondo
   Bootstrap mueve el modal al final del body, asi que se difumina todo
   lo demas. El modal queda como unico punto de atencion.
   ===================================================================== */
body.modal-open > nav.navbar-sistema,
body.modal-open > main,
body.modal-open > footer.footer-sistema,
body.modal-open > .aviso-pantalla-chica {
  filter: blur(var(--modal-desenfoque));
  transition: filter .18s ease-out;
  pointer-events: none;
  user-select: none;
}

body > nav.navbar-sistema,
body > main,
body > footer.footer-sistema {
  transition: filter .18s ease-out;
}

/* El velo se aclara un poco: con el desenfoque ya no hace falta tanto */
.modal-backdrop.show { opacity: var(--modal-velo); }

.modal-content {
  border: 0;
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(74, 29, 92, .35);
}
.modal-header {
  /* Mismo degradado que la barra superior: el modal se siente parte
     del sistema y no una ventana ajena pegada encima. */
  background: linear-gradient(90deg,
              var(--morado-800) 0%, var(--morado-600) 60%, var(--rosa-400) 100%);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  padding: .9rem 1.25rem;
}
.modal-header .modal-title,
.modal-header .modal-title.texto-morado {
  color: #fff !important;
  font-weight: 600;
  font-size: 1.05rem;
  display: flex; align-items: center;
}
.modal-header .modal-title .badge-suave {
  background: rgba(255,255,255,.22);
  color: #fff;
}
/* El aspa de cerrar en blanco */
.modal-header .btn-close {
  filter: brightness(0) invert(1);
  opacity: .8;
}
.modal-header .btn-close:hover { opacity: 1; }

.modal-footer { border-top: 1px solid var(--gris-100); }

/* =====================================================================
   MENUS HAMBURGUESA DENTRO DE TABLAS
   El problema: .table-responsive lleva overflow:auto y recorta cualquier
   menu desplegable que se salga del contenedor. Por eso habia que hacer
   scroll para ver las opciones.
   La solucion: las tablas con menu usan .tabla-con-menu, que no recorta,
   y el menu se posiciona con estrategia fija (fuera del flujo).
   ===================================================================== */
.tabla-con-menu { overflow: visible !important; }
.tabla-con-menu .table { margin-bottom: 0; }

.card, .tab-content, .tab-pane { overflow: visible; }

/* El menu se dibuja por encima de todo, incluso dentro de un modal */
.dropdown-menu {
  z-index: 1080;
  border: 0;
  box-shadow: var(--sombra-alta);
  border-radius: 10px;
  padding: .35rem;
  min-width: 210px;
}
.dropdown-menu .dropdown-item {
  border-radius: 7px;
  padding: .5rem .75rem;
  font-size: 13px;
}
.dropdown-menu .dropdown-item:hover { background: var(--rosa-100); color: var(--morado-800); }
.dropdown-menu .dropdown-item.text-danger:hover { background: #fdecea; color: var(--error); }

/* Boton de tres rayas de cada renglon */
.btn-menu-fila {
  border: 0; background: transparent;
  color: var(--gris-600);
  padding: .25rem .45rem; border-radius: 7px;
  line-height: 1;
}
.btn-menu-fila:hover { background: var(--rosa-100); color: var(--morado-700); }
.btn-menu-fila::after { display: none; }

/* =====================================================================
   CAMPOS BLOQUEADOS EN CASCADA
   Cuando un campo depende de otro (calle depende de colonia), se ve
   claramente apagado hasta que el anterior se resuelve.
   ===================================================================== */
.campo-bloqueado {
  background: var(--gris-100) !important;
  color: var(--gris-600) !important;
  cursor: not-allowed;
}
.aviso-bloqueo {
  display: flex; align-items: center; gap: .5rem;
  background: var(--rosa-100);
  color: var(--morado-800);
  border-radius: 9px;
  padding: .55rem .8rem;
  font-size: 12.5px;
}

/* Selector que abre un modal en vez de desplegar opciones */
.selector-modal {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236c6577' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 16px 12px;
  padding-right: 2.25rem;
}
.selector-modal:hover { border-color: var(--morado-500); }

/* Lista de resultados dentro de un modal de busqueda */
.lista-seleccion { max-height: 320px; overflow-y: auto; }
.lista-seleccion .opcion {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem .85rem;
  border-bottom: 1px solid var(--gris-100);
  cursor: pointer;
}
.lista-seleccion .opcion:last-child { border-bottom: 0; }
.lista-seleccion .opcion:hover { background: var(--rosa-100); }
.lista-seleccion .opcion.seleccionada {
  background: var(--morado-700); color: #fff;
}

/* Ningun contenedor del modal debe recortar los menus desplegables */
.modal-body, .modal-content, .modal-dialog { overflow: visible; }
.modal { overflow-x: hidden; overflow-y: auto; }

/* =====================================================================
   MODALES APILADOS
   Cuando un modal abre otro (el selector de ocupacion sobre el modal del
   tutor), Bootstrap les da el mismo z-index a los dos y el segundo queda
   atrapado detras. El JavaScript sube el z-index del que llega; aqui solo
   se deja el modal de abajo sin desenfoque propio para que no se acumule.
   ===================================================================== */
.modal.modal-encimado { box-shadow: none; }
body.modal-open .modal:not(.modal-encimado) { filter: none; }

/* SweetAlert2 siempre por encima de cualquier modal */
.swal2-container { z-index: 20000 !important; }

/* =====================================================================
   LLENADO AUTOMATICO DE UN CAMPO
   Cuando el sistema deduce un dato (la fecha de nacimiento a partir del
   RFC), conviene que se note: si aparece sin mas, el usuario no sabe si
   lo escribio el o el sistema, y no lo revisa.
   ===================================================================== */
.campo-autollenado {
  animation: destello-autollenado 1.1s ease-out;
}
@keyframes destello-autollenado {
  0%   { background: var(--rosa-100); box-shadow: 0 0 0 .25rem rgba(169,75,189,.35); }
  60%  { background: var(--rosa-100); box-shadow: 0 0 0 .25rem rgba(169,75,189,.15); }
  100% { background: #fff;            box-shadow: none; }
}

.marca-autollenado {
  position: absolute;
  right: 1.5rem;
  top: 2.1rem;
  color: var(--exito);
  font-size: 1.1rem;
  pointer-events: none;
  animation: palomita-autollenado 2.4s ease-out forwards;
}
@keyframes palomita-autollenado {
  0%   { opacity: 0; transform: scale(.4); }
  15%  { opacity: 1; transform: scale(1.25); }
  25%  { transform: scale(1); }
  75%  { opacity: 1; }
  100% { opacity: 0; transform: scale(.8); }
}

.campo-con-marca { position: relative; }

/* =====================================================================
   DOMICILIO COMPARTIDO
   ===================================================================== */
.aviso-vinculado {
  display: flex; align-items: flex-start; gap: .6rem;
  background: #fff6e5;
  border: 1px solid #f0d9a8;
  color: #7a5a12;
  border-radius: 9px;
  padding: .7rem .9rem;
  font-size: 12.5px;
  line-height: 1.5;
}
.aviso-vinculado i { color: var(--alerta); font-size: 1.05rem; margin-top: 1px; }

.chip-compartido {
  background: #fff6e5;
  color: #7a5a12;
  border: 1px solid #f0d9a8;
}

/* =====================================================================
   PAGINACION
   ===================================================================== */
.paginacion {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: .7rem 1rem;
  border-top: 1px solid var(--gris-100);
  font-size: 12.5px;
  color: var(--gris-600);
}
.paginacion .controles { display: flex; align-items: center; gap: .3rem; }
.paginacion .pagina {
  min-width: 32px; height: 32px;
  border: 1px solid var(--gris-300);
  background: #fff;
  border-radius: 8px;
  color: var(--gris-900);
  font-size: 12.5px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 .5rem;
}
.paginacion .pagina:hover:not(:disabled) {
  background: var(--rosa-100); border-color: var(--morado-500); color: var(--morado-800);
}
.paginacion .pagina.activa {
  background: var(--morado-700); border-color: var(--morado-700); color: #fff;
  font-weight: 600;
}
.paginacion .pagina:disabled { opacity: .4; cursor: default; }
.paginacion .puntos { padding: 0 .2rem; color: var(--gris-600); }

/* =====================================================================
   CORTINILLA DE CARGA
   Al abrir una vista, el navegador tarda un instante en acomodar tablas
   y combos, y se alcanza a ver el salto. Una cortinilla breve tapa ese
   armado: no acelera nada, pero la pantalla deja de brincar.
   ===================================================================== */
#cortinilla {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: var(--lila-50);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  transition: opacity .25s ease-out, visibility .25s ease-out;
}
#cortinilla.oculta {
  opacity: 0;
  visibility: hidden;
}
#cortinilla .marca {
  width: 60px; height: 60px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--morado-700), var(--rosa-400));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem;
  animation: latido 1.4s ease-in-out infinite;
}
@keyframes latido {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(169,75,189,.35); }
  50%      { transform: scale(1.06); box-shadow: 0 0 0 14px rgba(169,75,189,0); }
}
#cortinilla .texto {
  color: var(--morado-800);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .01em;
}
#cortinilla .barra {
  width: 180px; height: 4px;
  background: var(--rosa-100);
  border-radius: 999px;
  overflow: hidden;
}
#cortinilla .barra span {
  display: block; height: 100%; width: 40%;
  background: linear-gradient(90deg, var(--morado-600), var(--rosa-400));
  border-radius: 999px;
  animation: corre 1s ease-in-out infinite;
}
@keyframes corre {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* =====================================================================
   EXPEDIENTE ELECTRONICO
   ===================================================================== */

/* La pestania se resalta cuando hay documentos sin escanear. No basta
   con un numerito: si no destaca, nadie la abre y el expediente se
   queda incompleto durante meses. */
.nav-tabs-morado .nav-link.con-pendientes {
  color: var(--alerta);
  font-weight: 600;
}
.nav-tabs-morado .nav-link.con-pendientes::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--alerta);
  margin-right: .45rem;
  vertical-align: middle;
  animation: parpadeo-pendiente 1.8s ease-in-out infinite;
}
@keyframes parpadeo-pendiente {
  0%, 100% { opacity: 1;  transform: scale(1); }
  50%      { opacity: .35; transform: scale(.85); }
}
.nav-tabs-morado .nav-link.con-pendientes.active {
  color: var(--alerta);
  border-bottom-color: var(--alerta);
}
.badge-pendiente {
  background: #fff6e5;
  color: #7a5a12;
  border: 1px solid #f0d9a8;
}

/* Tarjeta de cada documento */
.doc-tarjeta {
  border: 1px solid var(--gris-300);
  border-radius: var(--radio);
  padding: 1rem;
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
  height: 100%;
}
.doc-tarjeta:hover { box-shadow: var(--sombra); }
.doc-tarjeta.pendiente {
  border-color: #f0d9a8;
  background: #fffdf8;
  border-style: dashed;
}
.doc-tarjeta.listo { border-color: #c9e8d8; }

.doc-icono {
  width: 44px; height: 44px;
  flex: 0 0 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
}
.doc-tarjeta.pendiente .doc-icono { background: #fff6e5; color: var(--alerta); }
.doc-tarjeta.listo     .doc-icono { background: #e6f5ee; color: var(--exito); }

.doc-nombre { font-weight: 600; color: var(--morado-900); line-height: 1.3; }
.doc-meta   { color: var(--gris-600); font-size: 11.5px; line-height: 1.5; }

/* ---------------------------------------------------------------------
   Listado de pacientes
   --------------------------------------------------------------------- */

/* Cuadrito morado a la izquierda del nombre. Si el paciente ya tiene
   fotografia se ve su cara; si no, un monito generico. Es un enlace, no
   un adorno: da el segundo camino al expediente. */
.avatar-mini {
  width: 34px; height: 34px;
  flex: 0 0 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--morado-700), var(--rosa-400));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  overflow: hidden;
  text-decoration: none;
  transition: transform .12s, box-shadow .12s;
}
.avatar-mini:hover { transform: scale(1.07); box-shadow: var(--sombra); color: #fff; }
.avatar-mini img { width: 100%; height: 100%; object-fit: cover; }

.enlace-paciente {
  font-weight: 600;
  color: var(--morado-800);
  text-decoration: none;
}
.enlace-paciente:hover { color: var(--morado-600); text-decoration: underline; }

/* La calle es el dato con el que se ubica a alguien, asi que va un poco
   mas grande y en su propio renglon; la colonia y el municipio abajo. */
.domicilio-calle { font-size: 13.5px; color: var(--gris-800, #3f3947); line-height: 1.35; }
.domicilio-resto { font-size: 11.5px; color: var(--gris-600); line-height: 1.35; }

/* ---------------------------------------------------------------------
   Planes de tratamiento
   --------------------------------------------------------------------- */

/* Mismo cuadrito que el del paciente, con otro simbolo: se reconoce de
   un vistazo que la fila es un plan y no una persona. */
.icono-plan {
  width: 30px; height: 30px;
  flex: 0 0 30px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--morado-700), var(--rosa-400));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem;
  text-decoration: none;
  transition: transform .12s, box-shadow .12s;
}
.icono-plan:hover { transform: scale(1.08); box-shadow: var(--sombra); color: #fff; }

/* El diagnostico es lo que distingue un plan de otro, asi que pesa mas
   que el nombre del dentista, que casi siempre se repite. */
.plan-diagnostico { font-size: 13px; color: var(--gris-800, #3f3947); line-height: 1.35; }
.plan-dentista    { font-size: 11px; color: var(--gris-600); line-height: 1.35; }

/* ---------------------------------------------------------------------
   Expediente electronico: carpeta de bloques colapsables

   Arriba lo que es del paciente y despues un bloque por cada plan de
   tratamiento. Cerrados de inicio para que un expediente con cinco anios
   de historia no llegue como una pared de tarjetas.
   --------------------------------------------------------------------- */
.exp-bloque {
  border: 1px solid var(--gris-300);
  border-radius: var(--radio);
  overflow: hidden;
  margin-bottom: .8rem;
  background: #fff;
}

.exp-cabecera {
  width: 100%;
  border: 0;
  background: var(--lila-50);
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .85rem 1rem;
  text-align: left;
  transition: background .15s;
}
.exp-cabecera:hover { background: var(--rosa-100); }
.exp-cabecera.abierto {
  background: linear-gradient(135deg, var(--morado-700), var(--rosa-400));
  color: #fff;
}

.exp-flecha { transition: transform .2s; color: var(--morado-600); }
.exp-cabecera.abierto .exp-flecha { transform: rotate(90deg); color: #fff; }

.exp-icono {
  width: 34px; height: 34px;
  flex: 0 0 34px;
  border-radius: 10px;
  background: #fff;
  color: var(--morado-700);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
}

.exp-titulo { flex: 1; min-width: 0; }
.exp-titulo .t { display: block; font-weight: 600; line-height: 1.3; }
.exp-titulo .s {
  display: block; font-size: 11.5px; opacity: .75;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Cerrado de verdad: sin altura y sin poder tabular hacia adentro. */
.exp-cuerpo { display: none; padding: 1rem; }
.exp-cuerpo.abierto { display: block; }

.exp-barra-plan {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  background: var(--lila-50);
  border-radius: var(--radio);
  padding: .6rem .8rem;
  margin-bottom: 1rem;
}

.exp-grupo { margin-bottom: 1.1rem; }
.exp-grupo:last-child { margin-bottom: 0; }

.exp-grupo-titulo {
  display: flex; align-items: center; gap: .5rem;
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--morado-700);
  border-bottom: 1px solid var(--gris-100);
  padding-bottom: .35rem;
  margin-bottom: .6rem;
}
.exp-grupo-titulo .cuenta {
  background: var(--rosa-100); color: var(--morado-800);
  border-radius: 999px; padding: 0 .45rem;
  font-size: 10.5px; letter-spacing: 0;
}

.exp-tarjetas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
}

.exp-vacio {
  color: var(--gris-600); font-size: 12px;
  background: var(--gris-50, #fafafa);
  border: 1px dashed var(--gris-300);
  border-radius: 10px;
  padding: .7rem .9rem;
}

.exp-consultas { display: flex; flex-direction: column; gap: .4rem; }
.exp-consulta {
  display: flex; align-items: center; gap: .8rem;
  border: 1px solid var(--gris-300);
  border-radius: 10px;
  padding: .6rem .8rem;
}
.exp-consulta .fecha {
  flex: 0 0 120px;
  font-size: 11.5px; font-weight: 600; color: var(--morado-700);
}

/* Zona para arrastrar archivos */
.zona-soltar {
  border: 2px dashed var(--gris-300);
  border-radius: var(--radio);
  padding: 2rem 1rem;
  text-align: center;
  color: var(--gris-600);
  background: var(--lila-50);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.zona-soltar:hover,
.zona-soltar.encima {
  border-color: var(--morado-500);
  background: var(--rosa-100);
  color: var(--morado-800);
}
.zona-soltar i { font-size: 2rem; display: block; margin-bottom: .5rem; }

.vista-previa {
  max-width: 100%;
  max-height: 320px;
  border-radius: var(--radio);
  border: 1px solid var(--gris-300);
  display: block;
  margin: 0 auto;
}

/* Aviso de almacenamiento caido */
.aviso-almacen {
  display: flex; align-items: flex-start; gap: .7rem;
  background: #fdecea;
  border: 1px solid #f5c2bd;
  color: #8c2c22;
  border-radius: 9px;
  padding: .8rem 1rem;
  font-size: 12.5px;
  line-height: 1.55;
}
.aviso-almacen i { color: var(--error); font-size: 1.1rem; }
.aviso-almacen code {
  background: rgba(0,0,0,.06);
  padding: .1rem .35rem;
  border-radius: 4px;
  color: inherit;
}

/* =====================================================================
   HISTORIA CLINICA
   Muchas preguntas de si/no y muchas casillas. Se hacen grandes y
   clicables para que se capture rapido, leyendo de la hoja de papel.
   ===================================================================== */
.grupo-sino {
  display: inline-flex;
  border: 1px solid var(--gris-300);
  border-radius: 9px;
  overflow: hidden;
  background: #fff;
}
.grupo-sino .opcion-sino {
  border: 0;
  background: transparent;
  padding: .42rem .8rem;
  font-size: 12.5px;
  color: var(--gris-600);
  border-right: 1px solid var(--gris-300);
  cursor: pointer;
  white-space: nowrap;
}
.grupo-sino .opcion-sino:last-of-type { border-right: 0; }
.grupo-sino .opcion-sino:hover { background: var(--rosa-100); color: var(--morado-800); }
.grupo-sino .opcion-sino.activa {
  background: var(--morado-700);
  color: #fff;
  font-weight: 600;
}
/* La opcion "No" marcada se ve distinta de la "Si": en una historia
   clinica la diferencia entre ambas importa demasiado como para que
   se distingan solo por su posicion. */
.grupo-sino .opcion-sino.activa[data-valor="0"] {
  background: var(--gris-600);
}

.rejilla-casillas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .35rem .8rem;
  align-items: center;
}
.rejilla-casillas .detalle-marca { grid-column: 1 / -1; margin-bottom: .3rem; }

.casilla-clinica {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .5rem;
  border-radius: 7px;
  cursor: pointer;
  font-size: 13px;
  user-select: none;
}
.casilla-clinica:hover { background: var(--rosa-100); }
.casilla-clinica input { accent-color: var(--morado-700); width: 15px; height: 15px; }
.casilla-clinica:has(input:checked) {
  background: var(--rosa-100);
  color: var(--morado-800);
  font-weight: 600;
}

/* =====================================================================
   AGENDA
   Los bloques de media hora se ven de un golpe: verde libre, gris
   ocupado. Recepcion necesita responder "cuando puede ser" sin leer.
   ===================================================================== */
.rejilla-espacios {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: .4rem;
}

.espacio {
  border: 1px solid var(--gris-300);
  border-radius: 9px;
  padding: .45rem .3rem;
  text-align: center;
  font-size: 12px;
  background: #fff;
  line-height: 1.3;
  overflow: hidden;
}
.espacio .hora { font-weight: 600; display: block; }
.espacio .quien {
  display: block;
  font-size: 9.5px;
  color: var(--gris-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.espacio.libre {
  background: #f2fbf6;
  border-color: #bfe6d1;
  color: var(--exito);
  cursor: pointer;
}
.espacio.libre:hover {
  background: var(--exito);
  border-color: var(--exito);
  color: #fff;
}
.espacio.ocupado {
  background: var(--gris-100);
  border-color: var(--gris-300);
  color: var(--gris-600);
  cursor: not-allowed;
}
.espacio.elegido {
  background: var(--morado-700) !important;
  border-color: var(--morado-700) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(123,45,142,.35);
}

/* Citas por confirmar en el tablero de inicio */
.cita-pendiente {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .6rem .8rem;
  border-bottom: 1px solid var(--gris-100);
}
.cita-pendiente:last-child { border-bottom: 0; }
.cita-pendiente .cuando {
  background: #fff6e5;
  border: 1px solid #f0d9a8;
  color: #7a5a12;
  border-radius: 8px;
  padding: .3rem .5rem;
  text-align: center;
  min-width: 62px;
  font-size: 11px;
  line-height: 1.25;
}
.cita-pendiente .cuando b { display: block; font-size: 13px; }

/* =====================================================================
   PASOS (journey) Y COLAPSABLES
   ===================================================================== */
.barra-pasos {
  display: flex;
  align-items: center;
  gap: .3rem;
  margin-bottom: 1.2rem;
  padding: .9rem 1rem;
  background: #fff;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow-x: auto;
}

.paso-chip {
  display: flex;
  align-items: center;
  gap: .5rem;
  border: 0;
  background: transparent;
  padding: .35rem .6rem;
  border-radius: 9px;
  color: var(--gris-600);
  font-size: 12.5px;
  white-space: nowrap;
  cursor: pointer;
}
.paso-chip:hover { background: var(--rosa-100); color: var(--morado-800); }

.paso-chip .numero {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid var(--gris-300);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
  flex: 0 0 26px;
}
.paso-chip.activo { color: var(--morado-800); font-weight: 600; }
.paso-chip.activo .numero {
  border-color: var(--morado-700);
  background: var(--morado-700);
  color: #fff;
}
.paso-chip.hecho { color: var(--exito); }
.paso-chip.hecho .numero {
  border-color: var(--exito);
  background: var(--exito);
  color: #fff;
}

.barra-pasos .union {
  flex: 1 1 18px;
  min-width: 18px;
  height: 2px;
  background: var(--gris-300);
  border-radius: 2px;
}

.pie-pasos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.2rem;
  padding: .9rem 1rem;
  background: #fff;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  position: sticky;
  bottom: 52px;   /* encima del footer fijo */
  z-index: 5;
}
.pie-pasos .contador { color: var(--gris-600); font-size: 12.5px; }

/* ---------- Modo colapsable ---------- */
.seccion-colapsable {
  border: 1px solid var(--gris-300);
  border-radius: var(--radio);
  background: #fff;
  margin-bottom: .7rem;
  overflow: hidden;
}
.cabeza-colapsable {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .7rem;
  border: 0;
  background: #fff;
  padding: .85rem 1.1rem;
  font-weight: 600;
  color: var(--morado-800);
  cursor: pointer;
}
.cabeza-colapsable:hover { background: var(--lila-50); }
.cabeza-colapsable.abierto { background: var(--rosa-100); }
.cabeza-colapsable .numero {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--morado-700);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px;
  flex: 0 0 24px;
}
.cabeza-colapsable .flecha { transition: transform .2s; color: var(--gris-600); }
.cabeza-colapsable.abierto .flecha { transform: rotate(180deg); }

.cuerpo-colapsable { display: none; padding: 1rem 1.1rem 1.2rem; }
.seccion-colapsable.abierto .cuerpo-colapsable { display: block; }

/* En modo colapsable las tarjetas internas ya no necesitan su propio
   marco: quedarian cajas dentro de cajas. */
.seccion-colapsable .cuerpo-colapsable > .card,
.seccion-colapsable .cuerpo-colapsable .row > [class^="col"] > .card {
  box-shadow: none;
  border: 1px solid var(--gris-100);
}

/* ---------------------------------------------------------------------
   Configuracion > Apariencia
   --------------------------------------------------------------------- */
.tema-tarjeta {
  width: 100%;
  border: 2px solid var(--gris-300);
  border-radius: var(--radio);
  background: #fff;
  padding: 0;
  overflow: hidden;
  text-align: left;
  display: block;
  position: relative;
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.tema-tarjeta:hover { box-shadow: var(--sombra-alta); transform: translateY(-2px); }
.tema-tarjeta.activo { border-color: var(--morado-600); }

/* Las seis franjas son la paleta real del tema, no una aproximacion:
   salen de los mismos valores que se le van a aplicar al sistema. */
.tema-tarjeta .muestra { display: flex; height: 54px; }
.tema-tarjeta .muestra span { flex: 1; }

.tema-tarjeta .cuerpo { display: block; padding: .7rem .9rem; }
.tema-tarjeta .nombre { display: block; font-weight: 600; color: var(--gris-900); }
.tema-tarjeta .nota   { display: block; font-size: 11.5px; color: var(--gris-600); }

.tema-tarjeta .marca {
  position: absolute; top: .5rem; right: .5rem;
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff; color: var(--morado-700);
  display: none; align-items: center; justify-content: center;
  box-shadow: var(--sombra);
}
.tema-tarjeta.activo .marca { display: flex; }

/* ---------------------------------------------------------------------
   Selector de organos dentarios
   --------------------------------------------------------------------- */

/* Boton de la tabla del plan: dice que hay elegido sin abrir el modal. */
.btn-dientes {
  width: 100%;
  border: 1px solid var(--gris-300);
  border-radius: 8px;
  background: #fff;
  padding: .35rem .5rem;
  font-size: 12.5px;
  color: var(--morado-800);
  display: flex; align-items: center; gap: .4rem;
  text-align: left;
  transition: border-color .15s, background .15s;
}
.btn-dientes:hover { border-color: var(--morado-500); background: var(--lila-50); }
.btn-dientes i { color: var(--morado-600); flex: 0 0 auto; }
.btn-dientes span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-dientes.vacio { color: var(--gris-600); }

/* La nota del procedimiento va debajo del nombre y no debe competir
   con el: chica y discreta. */
.campo-nota-chica {
  font-size: 11.5px;
  padding: .2rem .45rem;
  height: auto;
  min-height: 0;
}

/* ---------- La arcada ---------- */
.arcada {
  background: var(--lila-50);
  border: 1px solid var(--gris-300);
  border-radius: var(--radio);
  padding: 1rem .8rem;
}
.arcada .renglon { display: flex; align-items: center; justify-content: center; }
.arcada .mitad { display: flex; gap: .25rem; }

/* La linea media separa los cuadrantes derecho e izquierdo, como en la
   hoja de papel. Sin ella los numeros se leen como una sola tira. */
.arcada .linea-media {
  width: 2px; align-self: stretch;
  background: var(--gris-300);
  margin: 0 .6rem;
}

.arcada .etiqueta-arcada {
  display: flex; justify-content: space-between;
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--gris-600);
  padding: .45rem .2rem;
  margin: .3rem 0;
  border-top: 1px dashed var(--gris-300);
  border-bottom: 1px dashed var(--gris-300);
}

.diente {
  border: 0; background: transparent; padding: 0;
  width: 34px;
  display: flex; flex-direction: column; align-items: center;
  color: var(--gris-300);
  transition: transform .1s, color .15s;
}
.diente i { font-size: 1.5rem; line-height: 1; }
.diente span {
  font-size: 10px; font-weight: 600;
  color: var(--gris-600); margin-top: 1px;
}
.diente:hover:not(:disabled) { transform: translateY(-2px); color: var(--morado-400); }
.diente.elegido { color: var(--morado-600); }
.diente.elegido span { color: var(--morado-800); }
.diente:disabled { opacity: .35; }

/* Los temporales son mas chicos, como en la boca. */
.diente.temporal { width: 38px; }
.diente.temporal i { font-size: 1.3rem; }

/* El campo que titula algo: mas grande porque es lo primero que se lee
   en las listas y en el expediente. */
.campo-titular {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--morado-800);
  padding: .55rem .85rem;
}

/* ---------------------------------------------------------------------
   Movimiento de los pasos y de los colapsables

   El cambio de paso sin animacion se siente como si la pantalla se
   hubiera recargado: no queda claro si uno avanzo, retrocedio o algo
   fallo. El deslizado dice hacia donde va.
   --------------------------------------------------------------------- */
@keyframes paso-entra-derecha {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes paso-entra-izquierda {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0); }
}

.paso.entra-derecha   { animation: paso-entra-derecha  .22s ease-out; }
.paso.entra-izquierda { animation: paso-entra-izquierda .22s ease-out; }

/* El colapsable se abre creciendo, no apareciendo de golpe. La altura
   la pone el JavaScript en pixeles porque 'auto' no se puede animar. */
.cuerpo-colapsable {
  display: block;
  height: 0;
  overflow: hidden;
  padding: 0 1.1rem;
  transition: height .25s ease, padding .25s ease;
}
.seccion-colapsable.abierto .cuerpo-colapsable {
  height: auto;
  padding: 1rem 1.1rem 1.2rem;
}

/* Quien prefiere el sistema sin animaciones no las recibe. */
@media (prefers-reduced-motion: reduce) {
  .paso.entra-derecha, .paso.entra-izquierda { animation: none; }
  .cuerpo-colapsable { transition: none; }
}

/* ---------------------------------------------------------------------
   Anexos de la consulta (recetas, documentos, notas)
   --------------------------------------------------------------------- */
.anexo {
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .6rem 0;
  border-bottom: 1px solid var(--gris-100);
}
.anexo:last-child { border-bottom: 0; }

/* El texto de una receta o una nota puede ser largo. Se recorta a unas
   lineas: quien quiera leerlo completo abre el detalle. */
.anexo-texto {
  font-size: 12px; color: var(--gris-900);
  white-space: pre-wrap;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: .2rem;
}

.anexo-archivos { display: flex; flex-wrap: wrap; gap: .3rem; }
.anexo-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--rosa-100); color: var(--morado-800);
  border-radius: 999px; padding: .15rem .6rem;
  font-size: 11px; text-decoration: none;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.anexo-chip:hover { background: var(--morado-700); color: #fff; }
.anexo-chip.pendiente { background: #fff6e5; color: var(--alerta); }

/* ---------- Album de archivos ---------- */
.album-previo {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem;
}
.album-item {
  border: 1px solid var(--gris-300);
  border-radius: 9px;
  padding: .3rem;
  text-align: center;
  overflow: hidden;
}
.album-item img {
  width: 100%; height: 70px; object-fit: cover;
  border-radius: 6px; display: block;
}
.album-item i { font-size: 2rem; color: var(--morado-500); display: block; margin: .6rem 0; }
.album-item span {
  display: block; font-size: 10px; color: var(--gris-600);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- Encabezado de la receta ---------- */
.rx-encabezado {
  display: flex; gap: 1.2rem; align-items: flex-end;
  background: var(--lila-50);
  border: 1px solid var(--gris-300);
  border-radius: var(--radio);
  padding: .7rem .9rem;
}
.rx-encabezado .et {
  display: block; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--gris-600);
}
.rx-encabezado .va { display: block; font-weight: 600; color: var(--morado-800); }

/* El cuerpo de la receta se escribe como se ve en el papel. */
.rx-cuerpo {
  font-family: "Courier New", Courier, monospace;
  font-size: 13px; line-height: 1.6;
}

/* ---------------------------------------------------------------------
   Consultas dentro del expediente

   Cada consulta es una caja y sus documentos cuelgan debajo, recorridos
   a la derecha. La barra de color de la izquierda es lo que hace que se
   lea como "esto pertenece a esa cita" y no como una lista aparte.
   --------------------------------------------------------------------- */
.exp-consulta-caja {
  border: 1px solid var(--gris-300);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: .5rem;
}
.exp-consulta-caja .exp-consulta { border: 0; border-radius: 0; margin: 0; }

.exp-consulta-docs {
  border-top: 1px dashed var(--gris-300);
  background: var(--lila-50);
  padding: .7rem .7rem .7rem 1.6rem;
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem;
}
.exp-consulta-docs::before {
  content: '';
  position: absolute;
  left: .75rem; top: .7rem; bottom: .7rem;
  width: 3px; border-radius: 3px;
  background: var(--morado-400);
}
.exp-consulta-docs .doc-tarjeta { padding: .7rem; }
.exp-consulta-docs .doc-icono { width: 34px; height: 34px; flex: 0 0 34px; font-size: 1rem; }

.exp-consulta .fecha a { display: block; }

/* ---------------------------------------------------------------------
   Modulo Cajas
   --------------------------------------------------------------------- */

/* Tarjeta de estado de cada caja. Cerrada se ve apagada; abierta, con
   el borde de la marca: se distingue de un vistazo cual esta en uso. */
.caja-tarjeta {
  border: 1px solid var(--gris-300);
  border-radius: var(--radio);
  background: #fff;
  padding: .9rem 1rem;
  height: 100%;
}
.caja-tarjeta.abierta { border: 2px solid var(--morado-600); }

.caja-icono {
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 10px;
  background: var(--gris-100); color: var(--gris-600);
  display: flex; align-items: center; justify-content: center;
}
.caja-tarjeta.abierta .caja-icono {
  background: var(--morado-700); color: #fff;
}

.caja-cifras { display: flex; gap: .5rem; }
.caja-cifras > div { flex: 1; }
.caja-cifras .et {
  display: block; font-size: 10px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--gris-600);
}
.caja-cifras .va { display: block; font-size: 13px; color: var(--morado-800); }

.cifra-corte {
  border: 1px solid var(--gris-300);
  border-radius: 10px;
  padding: .5rem .7rem;
  text-align: center;
}
.cifra-corte.destacada { border: 2px solid var(--morado-600); }
.cifra-corte .et {
  display: block; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--gris-600);
}
.cifra-corte .va {
  display: block; font-size: 1.15rem; font-weight: 600; color: var(--morado-800);
}

.desglose-formas {
  display: flex; flex-wrap: wrap; gap: .4rem;
  background: var(--lila-50);
  border-radius: 10px; padding: .5rem .7rem;
}
.desglose-formas .forma {
  display: flex; gap: .4rem; align-items: baseline;
  background: #fff; border-radius: 999px;
  padding: .15rem .7rem; font-size: 12px;
}
.desglose-formas .nombre { color: var(--gris-600); }
.desglose-formas .monto { font-weight: 600; color: var(--morado-800); }

/* Comparativo del cierre: se descubre despues de capturar el conteo. */
.cierre-comparativo {
  display: flex; gap: 1rem;
  background: var(--lila-50);
  border: 1px solid var(--gris-300);
  border-radius: var(--radio);
  padding: .6rem .9rem;
}
.cierre-comparativo > div { flex: 1; text-align: center; }
.cierre-comparativo .et {
  display: block; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--gris-600);
}
.cierre-comparativo .va {
  display: block; font-size: 1.1rem; font-weight: 600; color: var(--morado-800);
}

/* Formas de pago del cobro: una linea por forma, pago mixto en la
   misma pantalla sin abrir nada. */
.forma-pago {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  padding: .4rem 0;
  border-bottom: 1px solid var(--gris-100);
}
.forma-pago:last-child { border-bottom: 0; }
.forma-pago .cb-forma { flex: 1; min-width: 120px; }
.forma-pago .cb-referencia { flex: 1 1 100%; font-size: 12px; }

.resumen-saldo {
  display: flex; gap: .5rem;
  background: var(--lila-50);
  border-radius: var(--radio);
  padding: .6rem .9rem;
}
.resumen-saldo > div { flex: 1; text-align: center; }
.resumen-saldo .et {
  display: block; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--gris-600);
}
.resumen-saldo .va {
  display: block; font-weight: 600; color: var(--morado-800);
}

/* ---------------------------------------------------------------------
   Agenda: vista de semana

   Rejilla de media hora por dia. Los huecos libres son literalmente
   los espacios en blanco, que es lo que la hace util de un vistazo.
   --------------------------------------------------------------------- */
.semana-caja { overflow: auto; max-height: calc(100vh - 300px); }

table.semana {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12px;
}

table.semana thead th {
  position: sticky; top: 0; z-index: 2;
  background: #fff;
  border-bottom: 2px solid var(--gris-100);
  padding: .5rem .3rem;
  text-align: center;
}
table.semana thead th.hoy { background: var(--rosa-100); }
table.semana thead th .nombre {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--gris-600);
}
table.semana thead th .dia {
  font-size: 1.1rem; font-weight: 600; color: var(--morado-800);
}

table.semana td {
  height: 34px;
  border: 1px solid var(--gris-100);
  padding: 0;
  vertical-align: top;
}

/* La hora va pegada a la izquierda al desplazar en horizontal. */
table.semana .hora {
  width: 58px;
  position: sticky; left: 0; z-index: 1;
  background: #fff;
  border-right: 2px solid var(--gris-100);
  font-size: 10.5px; color: var(--gris-600);
  text-align: right; padding: .15rem .4rem 0 0;
  vertical-align: top;
}
table.semana thead .hora { z-index: 3; }

table.semana td.libre { background: #fff; cursor: pointer; }
table.semana td.libre:hover { background: var(--rosa-100); }
table.semana td.libre.encima {
  background: var(--morado-400);
  box-shadow: inset 0 0 0 2px var(--morado-700);
}

/* Lo que ya paso y lo cerrado se ven apagados, pero distinto entre si:
   uno es "ya no se puede" y el otro "nunca se pudo". */
table.semana td.paso    { background: #fafafa; }
table.semana td.cerrado { background: repeating-linear-gradient(
    45deg, #f6f4f7, #f6f4f7 6px, #efecf1 6px, #efecf1 12px); }

table.semana td.bloqueado {
  background: repeating-linear-gradient(
    45deg, #fff3f2, #fff3f2 6px, #ffe8e6 6px, #ffe8e6 12px);
  color: #b03a2e;
  font-size: 9.5px;
  padding: .15rem .3rem;
  overflow: hidden;
}

table.semana td.con-cita { padding: 2px; }

.cita-bloque {
  height: 100%;
  border-left: 4px solid var(--color, var(--morado-600));
  background: color-mix(in srgb, var(--color, #9333a8) 10%, #fff);
  border-radius: 6px;
  padding: .2rem .35rem;
  overflow: hidden;
  cursor: grab;
  transition: box-shadow .12s;
}
.cita-bloque:hover { box-shadow: var(--sombra); }
.cita-bloque.arrastrando { opacity: .4; cursor: grabbing; }

.cita-bloque .hora { font-size: 10px; color: var(--gris-600);
                     position: static; background: none; padding: 0;
                     text-align: left; border: 0; }
.cita-bloque .paciente {
  font-weight: 600; font-size: 11.5px; line-height: 1.25;
  color: var(--morado-900);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cita-bloque .motivo {
  font-size: 10px; color: var(--gris-600);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cita-bloque .estado {
  display: inline-block; font-size: 9px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--color, var(--morado-700));
}

/* ---------------------------------------------------------------------
   Recordatorios del tablero
   --------------------------------------------------------------------- */
.btn-whatsapp {
  background: #25d366; border-color: #25d366; color: #fff;
  font-weight: 500;
}
.btn-whatsapp:hover { background: #1da851; border-color: #1da851; color: #fff; }

/* Al registrarlo, la fila se va: dejarla ahi invita a mandar el mismo
   recordatorio dos veces. */
.recordatorio {
  transition: opacity .35s, transform .35s, background .2s;
}
.recordatorio.hecho {
  opacity: 0;
  transform: translateX(28px);
  background: #e6f5ee;
}

/* Linea de tiempo de los recordatorios */
.linea-recordatorios { padding: 2.5rem 1rem 1.5rem; }
.linea-recordatorios .linea {
  position: relative; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, var(--gris-300), var(--morado-600));
}
.linea-recordatorios .marca { position: absolute; top: -8px; transform: translateX(-50%); }
.linea-recordatorios .punto {
  display: block; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 4px solid var(--morado-500);
}
.linea-recordatorios .marca.cita .punto {
  border-color: var(--morado-800); background: var(--morado-800);
}
.linea-recordatorios .texto {
  position: absolute; top: -26px; left: 50%; transform: translateX(-50%);
  font-size: 11px; white-space: nowrap; color: var(--gris-600);
}
.linea-recordatorios .marca.cita .texto {
  font-weight: 600; color: var(--morado-800);
}