/* Ajustes propios POR ENCIMA de Tabler (que carga antes). Dos capas:
   1. Compatibilidad: las clases del diseño antiguo (.tarjeta, .boton, .pestanas…) expresadas
      con los tokens de Tabler, para que las vistas aún no convertidas se integren solas.
   2. Componentes propios que ningún framework trae: odontograma, agenda, impresión. */

/* ── Estructura ── */
main { display: block; }
.page-header-propia { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 0 0 1.25rem; }
.navbar-brand a { color: inherit; }
.sidebar-usuario { border-color: rgba(255, 255, 255, .1) !important; }

/* ── Capa de compatibilidad con el diseño antiguo ── */
.fila-superior { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tarjeta { background: var(--tblr-bg-surface); border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius); padding: 1rem; box-shadow: var(--tblr-card-box-shadow, 0 1px 2px rgba(0,0,0,.04)); }
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem; }
.tarjeta.rejilla { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); row-gap: .2rem; }
.tarjeta.rejilla p { margin: .35rem 0; }
.tenue { color: var(--tblr-secondary-color); font-size: .85em; }
.aviso-truncado { color: var(--tblr-secondary-color); font-size: .85rem; margin: .5rem 0; }

/* Botones antiguos → aspecto de btn de Tabler */
.boton { display: inline-block; background: var(--tblr-primary); color: #fff; border: 1px solid var(--tblr-primary); padding: .4375rem 1rem; border-radius: var(--tblr-border-radius); font-size: .875rem; line-height: 1.4285714; text-decoration: none; cursor: pointer; }
.boton:hover { background: color-mix(in srgb, var(--tblr-primary) 90%, black); color: #fff; }
.boton.secundario { background: var(--tblr-bg-surface); color: var(--tblr-body-color); border-color: var(--tblr-border-color); }
.boton.secundario:hover { background: var(--tblr-bg-surface-secondary, #f6f8fb); color: var(--tblr-body-color); }
.boton.peligro { background: var(--tblr-danger); border-color: var(--tblr-danger); }
button { cursor: pointer; }
button.enlace { background: none; border: none; color: var(--tblr-secondary-color); padding: .3rem .5rem; }
button.enlace:hover { color: var(--tblr-primary); }

/* Formularios antiguos: los controles sin clase imitan a .form-control */
form.form label, .login-caja label { display: block; margin: .7rem 0 .2rem; font-size: .875rem; color: var(--tblr-secondary-color); }
main input:not([class]), main select:not([class]), main textarea:not([class]) {
  width: 100%; padding: .4375rem .75rem; border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius); font: inherit; background: var(--tblr-bg-forms, #fff);
  color: var(--tblr-body-color); transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
main input:not([class]):focus, main select:not([class]):focus, main textarea:not([class]):focus {
  outline: none; border-color: var(--tblr-primary);
  box-shadow: 0 0 0 .25rem rgba(var(--tblr-primary-rgb), .25);
}
label.casilla { display: flex; align-items: center; gap: .4rem; width: auto; margin: 0; white-space: nowrap; font-size: .875rem; color: var(--tblr-secondary-color); }
label.casilla input[type=checkbox] { width: auto; margin: 0; }
form.form label[style*="width:auto"] { display: inline-flex; align-items: center; gap: .4rem; }
form.form label[style*="width:auto"] input[type=checkbox] { width: auto; margin: 0; }
form.en-linea { display: flex; gap: .3rem; align-items: center; }
form.en-linea select { width: auto; }
.celda-horas { display: flex; gap: .4rem; }
.celda-horas input { width: auto; }

/* Tablas sin clase (vistas antiguas) → aspecto de tabla de Tabler dentro de su tarjeta */
main table:not([class]) { width: 100%; border-collapse: collapse; background: var(--tblr-bg-surface); border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius); overflow: hidden; }
main table:not([class]) th { text-align: left; padding: .5rem .75rem; border-bottom: 1px solid var(--tblr-border-color); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tblr-secondary-color); background: var(--tblr-bg-surface-tertiary, #f6f8fb); }
main table:not([class]) td { text-align: left; padding: .55rem .75rem; border-bottom: 1px solid var(--tblr-border-color); font-size: .875rem; }
main table:not([class]) tr:hover td { background: var(--tblr-active-bg, #f6f8fb); }
td.derecha, th.derecha { text-align: right; }

/* Etiquetas antiguas → badges */
.etiqueta { display: inline-block; font-size: .75rem; padding: .25rem .5rem; border-radius: 99px; font-weight: 500; line-height: 1; }
.etiqueta.activo { background: #d9f0e1; color: #1a7f37; }
.etiqueta.baja { background: #fbdcdc; color: #b91c1c; }
.etiqueta-titulo { background: #e3ecfd; color: var(--tblr-primary); padding: .1rem .45rem; border-radius: .3rem; font-size: .85em; }
.etiqueta.estado-presupuestado { background: var(--tblr-bg-surface-tertiary, #f1f5f9); color: var(--tblr-secondary-color); }
.etiqueta.estado-aceptado { background: #dbeafe; color: #1d4ed8; }
.etiqueta.estado-en_curso { background: #fef9c3; color: #a16207; }
.etiqueta.estado-terminado { background: #d9f0e1; color: #1a7f37; }
.etiqueta.estado-anulado { background: #fbdcdc; color: #b91c1c; }

/* Pestañas antiguas → nav-tabs */
.pestanas { display: flex; gap: .3rem; border-bottom: 1px solid var(--tblr-border-color); margin: 1rem 0; flex-wrap: wrap; }
.pestanas a { padding: .5rem .9rem; text-decoration: none; color: var(--tblr-secondary-color); border-radius: var(--tblr-border-radius) var(--tblr-border-radius) 0 0; border: 1px solid transparent; margin-bottom: -1px; }
.pestanas a.activa { background: var(--tblr-bg-surface); border-color: var(--tblr-border-color); border-bottom-color: var(--tblr-bg-surface); color: var(--tblr-primary); }
.pestanas-ficha { flex-wrap: wrap; }

/* Avisos antiguos → alerts */
.aviso { padding: .6rem .9rem; border-radius: var(--tblr-border-radius); margin-bottom: 1rem; font-size: .92rem; }
.aviso-simulacion { background: #fef9c3; color: #854d0e; border: 1px solid #fde68a; }
.aviso-real { background: #fbdcdc; color: #991b1b; border: 1px solid #f5c2c7; font-weight: 600; }
.aviso-error { background: #fbdcdc; color: #991b1b; border: 1px solid #f5c2c7; }
.error { color: var(--tblr-danger); }
.acciones-dialogo { display: flex; gap: .6rem; margin-bottom: 0; }
.acciones-secundarias { display: flex; gap: .6rem; margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--tblr-border-color); }
/* [hidden] y .acciones-secundarias empatan en especificidad; sin esta regla el bloque se
   vería SIEMPRE (display:flex gana a la hoja del user-agent). Ver historial: cazado en vivo. */
.acciones-secundarias[hidden] { display: none; }

/* Diálogos nativos */
dialog { border: 1px solid var(--tblr-border-color); border-radius: .7rem; padding: 1.2rem; max-width: 520px; width: 92vw; box-shadow: 0 10px 40px rgba(0, 0, 0, .18); }
dialog::backdrop { background: rgba(24, 36, 51, .45); }
dialog h2 { margin: 0 0 .6rem; font-size: 1.1rem; }

/* Buscador con sugerencias (agenda) */
.sugerencias { position: relative; }
.lista-sugerencias { list-style: none; margin: .2rem 0 0; padding: 0; border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius); max-height: 210px; overflow: auto; background: var(--tblr-bg-surface); }
.lista-sugerencias:empty { display: none; }
.lista-sugerencias li { border-bottom: 1px solid var(--tblr-border-color); }
.lista-sugerencias li:last-child { border-bottom: none; }
button.sugerencia { display: block; width: 100%; text-align: left; background: none; border: none; padding: .45rem .6rem; font: inherit; }
button.sugerencia:hover { background: var(--tblr-active-bg, #f6f8fb); }

/* ── Agenda ── */
.filtros-agenda { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.punto-color { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .35rem; }
#calendario { background: var(--tblr-bg-surface); border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius); padding: .6rem; }
.fc { font-size: .85rem; }
.fc .fc-button { background: var(--tblr-bg-surface); color: var(--tblr-primary); border: 1px solid var(--tblr-border-color); text-transform: none; box-shadow: none; }
.fc .fc-button:hover, .fc .fc-button-active { background: var(--tblr-active-bg, #eef4fd); }
.fc-event { cursor: pointer; border-radius: .25rem; }
.fc-event.estado-anulada { opacity: .45; text-decoration: line-through; }
.fc-event.estado-ha_venido { border-left: 4px solid var(--tblr-success) !important; }
.fc-event.estado-no_ha_venido { border-left: 4px solid var(--tblr-danger) !important; }
.fc-event.es-bloqueo { font-style: italic; }
/* Si FullCalendar hace render() con el contenedor a ancho 0 (pestaña en segundo plano, panel
   de previsualización aún sin medida), estampa width:0px INLINE en sus tres tablas y los
   rótulos de los días se quedan apelotonados en la esquina hasta que algo dispare un resize.
   No es el ancho del aside .fc-timegrid-axis —sus <col> quedan bien, a 45px—, es el ancho
   total de las tablas. Mientras el inline siga en "0px" esta regla las estira; en cuanto
   FullCalendar recalcula de verdad escribe píxeles reales y el selector deja de casar solo. */
#calendario table[style*="width: 0px"],
#calendario table[style*="width:0px"] { width: 100% !important; }
tr.llegada-ha_llegado td { background: #fef9c3; }
tr.llegada-en_sillon td { background: #dbeafe; }
tr.llegada-atendida td { opacity: .6; }

/* ── Historia clínica ── */
.episodio { margin-bottom: .7rem; }
.texto-episodio { white-space: pre-wrap; margin: .5rem 0 0; }

/* Miniaturas de las fotos de cada visita. 88px es el tamaño en que una foto intraoral aún se
   reconoce de un vistazo sin que una revisión con 20 fotos ocupe media pantalla. */
.miniatura-episodio { width: 88px; height: 88px; object-fit: cover; cursor: zoom-in; transition: transform .12s; }
.miniatura-episodio:hover { transform: scale(1.06); }

/* Visor a pantalla completa. La regla `dialog` general limita a 520px, que aquí sobra: se
   redefine todo para que la foto mande y el fondo desaparezca. */
.visor-foto {
  max-width: 100vw; width: 100vw; height: 100vh; max-height: 100vh;
  padding: 0; border: 0; background: transparent; box-shadow: none;
}
/* El display SOLO cuando está abierto. Un `display: flex` suelto en la clase gana al
   `display: none` que el navegador da a los <dialog> cerrados (una clase puntúa más que el
   selector de la hoja de usuario), y al cerrar se iba el fondo pero la foto se quedaba
   flotando encima de la ficha. */
.visor-foto[open] { display: flex; align-items: center; justify-content: center; }
.visor-foto::backdrop { background: rgba(0, 0, 0, .88); }
.visor-foto img {
  max-width: 94vw; max-height: 88vh; object-fit: contain; border-radius: .4rem;
  cursor: zoom-in;
  /* El navegador no debe hacer su propio scroll/pinch encima: el gesto lo maneja el visor. */
  touch-action: none;
  user-select: none; -webkit-user-drag: none;
}
/* Sin transición mientras se arrastra, o la imagen va por detrás del dedo. */
.visor-foto.con-zoom img { cursor: grab; }
.visor-foto.con-zoom img:active { cursor: grabbing; }

/* Barra inferior: nivel de zoom, sus botones y el nombre de la foto. */
.visor-barra {
  position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: .5rem;
  background: rgba(0, 0, 0, .6); padding: .3rem .5rem; border-radius: 2rem;
  max-width: 94vw;
}
.visor-pie { margin: 0; color: #fff; font-size: .9rem; padding: 0 .5rem; }
.visor-nivel {
  color: #fff; font-size: .85rem; min-width: 3.6rem; text-align: center;
  font-variant-numeric: tabular-nums;   /* el número no baila al cambiar de 100 a 150 */
}
/* Botones del visor: 44px de lado, que es el mínimo cómodo con el dedo (WCAG 2.5.5), y
   posicionados sobre el fondo y no sobre la foto para no tapar la zona que se mira. */
.visor-foto button {
  position: fixed; background: rgba(0, 0, 0, .5); color: #fff; border: 0;
  border-radius: 50%; width: 44px; height: 44px; font-size: 1.6rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.visor-foto button:hover { background: rgba(0, 0, 0, .8); }
/* Los de la barra van EN la barra, no sueltos por la pantalla: heredan el aspecto pero no
   la posición fija de arriba. */
.visor-barra button { position: static; width: 36px; height: 36px; font-size: 1.1rem; background: rgba(255, 255, 255, .12); }
.visor-barra button:hover { background: rgba(255, 255, 255, .28); }
.visor-barra button[data-visor-zoom="0"] { width: auto; padding: 0 .7rem; border-radius: 1rem; font-size: .8rem; }
.visor-cerrar { top: 1rem; right: 1rem; }
.visor-antes { left: 1rem; top: 50%; transform: translateY(-50%); }
.visor-despues { right: 1rem; top: 50%; transform: translateY(-50%); }
.visor-foto button[hidden] { display: none; }
.acciones-episodio { display: flex; gap: .5rem; align-items: flex-start; }
.acciones-episodio details { position: relative; }
.acciones-episodio summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

/* ── Historia clínica imprimible ──
   Se compone como un documento y no como una pantalla: los bloques van con título y filete, sin
   tarjetas dentro, y ningún dato depende de un color (los estados van escritos, no en pastillas)
   porque el navegador no imprime fondos si el usuario no se lo pide. */
.imprimible { max-width: 840px; margin: 1.5rem auto; padding: 2rem 2.5rem; background: var(--tblr-bg-surface); border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius); }
.cabecera-impresion { border-bottom: 2px solid var(--tblr-border-color); padding-bottom: .6rem; margin-bottom: 1rem; }
.cabecera-impresion .nombre-paciente { font-weight: 600; }
/* Los 15rem por columna de Tabler dejan la identificación del paciente en dos filas dentro del
   ancho del documento; son cuatro datos cortos y caben en una. */
.cabecera-impresion .datagrid { --tblr-datagrid-item-width: 10rem; }
.acciones-impresion { display: flex; gap: .5rem; margin-bottom: 1.5rem; }
.bloque-impreso { margin-bottom: 1.8rem; }
.bloque-impreso > h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--tblr-border-color); padding-bottom: .25rem; margin: 0 0 .7rem; }
.bloque-impreso > h3 { font-size: .9rem; color: var(--tblr-secondary-color); margin: 1.2rem 0 .5rem; }
.nota-bloque { font-size: .8rem; color: var(--tblr-secondary-color); margin: 0 0 .5rem; }
/* Un bloque vacío tiene que DECIR que está vacío: en una historia clínica, la ausencia de
   dato es información, y un hueco en blanco se lee como un descuido del programa. */
.vacio-impreso { color: var(--tblr-secondary-color); font-style: italic; margin: 0; }
.lista-datos { display: grid; grid-template-columns: max-content 1fr; gap: .2rem 1.2rem; margin: 0; }
.lista-datos dt { font-weight: 600; }
.lista-datos dd { margin: 0; white-space: pre-wrap; }
.episodio-impreso { border-bottom: 1px solid var(--tblr-border-color); padding: .6rem 0; break-inside: avoid; }
.cabecera-episodio { margin: 0 0 .3rem; }
.tratamiento-impreso { padding: .6rem 0; }
.tratamiento-impreso .table { margin-bottom: 0; }
.tabla-impresa { font-size: .85rem; }
.tabla-impresa th, .tabla-impresa td { vertical-align: top; }
.pie-impresion { border-top: 1px solid var(--tblr-border-color); padding-top: .6rem; font-size: .75rem; color: var(--tblr-secondary-color); }
@media print {
  body { background: #fff; }
  aside.navbar, .page-header-propia .btn-list, .fila-superior a, .boton, .btn { display: none !important; }
  .page-wrapper { margin: 0 !important; }
  .page-body { margin: 0; }
  .container-xl { max-width: none; padding: 0; }
  @page { margin: 1.5cm; }
  .imprimible { max-width: none; margin: 0; padding: 0; border: 0; background: none; }
  /* Un título nunca se queda solo al final de la hoja, y las cabeceras de tabla se repiten
     en cada página: una tabla de 200 cambios de odontograma ocupa varias. */
  .bloque-impreso > h2, .bloque-impreso > h3 { break-after: avoid; }
  .tabla-impresa thead { display: table-header-group; }
  .tabla-impresa tr, .tratamiento-impreso { break-inside: avoid; }
}

/* ── Odontograma (SVG de Zoltán Dul, MIT — ver CREDITOS.md) ── */
.leyenda { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1rem; font-size: .82rem; color: var(--tblr-secondary-color); }
.leyenda-item { display: flex; align-items: center; }
.lienzo-odontograma { display: flex; flex-direction: column; align-items: center; margin: 0 0 2.4rem; }
.arcada { display: flex; align-items: flex-end; gap: 0; }
.arcada.inferior { align-items: flex-start; }
.arcada .linea-media { width: .9rem; }
.separador-arcada { width: .8rem; }
/* El número va SIEMPRE por fuera: encima de la arcada superior, debajo de la inferior. */
button.diente { display: flex; flex-direction: column-reverse; align-items: center; gap: 1px; background: none; border: none; padding: 0 1px; border-radius: .3rem; }
.arcada.inferior button.diente { flex-direction: column; }
/* Altura fija (no ancho): la línea de la encía queda alineada entre familias de dientes. */
button.diente img { height: 74px; width: auto; display: block; }
.lienzo-odontograma.temporal button.diente img { height: 64px; }
button.diente .numero { font-size: .7rem; color: var(--tblr-secondary-color); line-height: 1.4; }
button.diente:hover, button.diente:focus-visible { background: #dbeafe; outline: 2px solid var(--tblr-primary); outline-offset: -2px; }
button.diente:hover .numero, button.diente:focus-visible .numero { color: var(--tblr-primary); font-weight: 700; }

/* ── Documentos ── */
.rejilla-documentos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .8rem; }
.documento { margin: 0; padding: .6rem; }
.documento img { width: 100%; height: 150px; object-fit: cover; border-radius: .35rem; background: var(--tblr-bg-surface-tertiary, #f1f5f9); }
.icono-pdf { height: 150px; display: flex; align-items: center; justify-content: center; background: var(--tblr-bg-surface-tertiary, #f1f5f9); color: var(--tblr-secondary-color); font-weight: 700; border-radius: .35rem; font-size: 1.1rem; }
.documento figcaption { margin-top: .45rem; font-size: .85rem; }

/* ── Tratamientos y caja ── */
.tratamiento { margin-bottom: 1rem; }
.tratamiento h3 { margin: 0; font-size: 1rem; }
.tratamiento h4 { margin: 1rem 0 .3rem; font-size: .9rem; color: var(--tblr-secondary-color); }
tfoot th { font-size: .9rem; }
tfoot tr.debe th { color: var(--tblr-danger); }
tfoot tr.saldado th { color: var(--tblr-success); }
tr.total th { border-top: 2px solid var(--tblr-border-color); }
.cuadra { color: var(--tblr-success); }
.descuadra { color: var(--tblr-danger); }
td.debe { color: var(--tblr-danger); }

/* Cuestionario de la pantalla pública de firma. Lo rellena el paciente con el pulgar, de pie y
   con prisa: las etiquetas de Tabler miden 20 px de alto y la recomendación para un área de
   toque (WCAG 2.5.5) son 44. Con 20 px se falla el toque y se marca la opción de al lado, que
   en un cuestionario de alergias no es un detalle estético. */
.opciones-toque .form-check {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: .5rem 1rem .5rem 2.4rem;
  margin-right: .75rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
}
.opciones-toque .form-check-input {
  width: 1.3em;
  height: 1.3em;
  margin-left: -1.9rem;
}
.opciones-toque .form-check-label { padding-left: .25rem; }
/* La opción elegida se ve de un vistazo al repasar doce preguntas antes de firmar. */
.opciones-toque .form-check:has(.form-check-input:checked) {
  border-color: var(--tblr-primary);
  background: var(--tblr-primary-lt);
}