/* Identidad Ortomind (Manual de marca, ed. 1 · 2026) */
@font-face { font-family: 'Nunito'; src: url('/fonts/nunito-latin.woff2') format('woff2'); font-weight: 200 1000; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('/fonts/nunito-latin-italic.woff2') format('woff2'); font-weight: 200 1000; font-style: italic; font-display: swap; }
:root {
  --bosque: #1d3b34;       /* verde bosque · principal */
  --menta: #77b5a9;        /* verde menta · fondos y acentos */
  --menta-profundo: #2f7d6d; /* texto y botones sobre blanco */
  --arena: #e6d5b8;        /* beige arena · acentos */
  --salvia: #a8bba2;
  --hueso: #f5f1e8;
  --piedra: #d9d3c7;
  --primario: var(--menta-profundo);
  --primario-oscuro: var(--bosque);
  --primario-suave: #e4efec;
  --dorado: var(--arena);
  --fondo: var(--hueso);
  --panel: #ffffff;
  --borde: #e8e3d8;
  --borde-fuerte: var(--piedra);
  --texto: var(--bosque);
  --texto-suave: #5a6f68;
  --peligro: #b0483e;
  --peligro-suave: #fbefec;
  --exito: #16a34a;
  --aviso: #d97706;
  --radio: 10px;
  --sombra: 0 1px 2px rgba(29, 59, 52, .05), 0 4px 16px rgba(29, 59, 52, .06);
  --lateral: 220px;
  font-size: 14px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: 'Nunito', Arial, sans-serif;
  background: var(--fondo);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primario); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -.01em; color: var(--bosque); }
h1 { font-size: 22px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
.cargando-pantalla { display: grid; place-items: center; height: 100vh; color: var(--texto-suave); }
.oculto { display: none !important; }
.suave { color: var(--texto-suave); }
.peq { font-size: 12px; }

/* ---------- Estructura ---------- */
.marco { display: grid; grid-template-columns: var(--lateral) 1fr; height: 100vh; }
.lateral {
  background: var(--bosque);
  color: #dce8e4;
  display: flex; flex-direction: column;
  padding: 18px 12px;
  gap: 4px;
}
.marca { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 6px 10px 20px; }
.marca .logo { width: 150px; height: auto; display: block; }
.marca .isotipo { display: none; width: 40px; height: 40px; }
.marca small { display: block; font-size: 11px; color: var(--arena); letter-spacing: .02em; }
.logo-doc { height: 46px; width: auto; display: block; }
.nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 8px;
  color: #dce8e4; font-weight: 500;
}
.nav a:hover { background: rgba(255,255,255,.07); text-decoration: none; }
.nav a.activo { background: rgba(255,255,255,.14); color: #fff; }
.nav svg { width: 18px; height: 18px; flex: none; }
.nav .proximamente { opacity: .45; pointer-events: none; }
.nav .proximamente small { margin-left: auto; font-size: 10px; border: 1px solid currentColor; border-radius: 6px; padding: 0 5px; }
.lateral .pie { margin-top: auto; border-top: 1px solid rgba(255,255,255,.1); padding: 12px 8px 0; font-size: 12px; }
.lateral .pie b { color: #fff; display: block; font-size: 13px; }
.lateral .pie button { margin-top: 8px; }
.contenido { overflow: auto; display: flex; flex-direction: column; min-width: 0; }
.cabecera {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 18px 24px 14px;
}
.cabecera .acciones { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cuerpo { padding: 0 24px 24px; flex: 1; min-height: 0; }

/* ---------- Controles ---------- */
button, .boton {
  font: inherit; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--borde-fuerte); background: #fff; color: var(--texto);
  border-radius: 8px; padding: 7px 12px; font-weight: 700; white-space: nowrap;
}
button:hover, .boton:hover { background: #f8fafc; text-decoration: none; }
button:disabled { opacity: .55; cursor: default; }
button.primario, .boton.primario { background: var(--primario); border-color: var(--primario); color: #fff; }
button.primario:hover { background: var(--primario-oscuro); }
button.peligro { color: var(--peligro); border-color: #fecaca; }
button.peligro:hover { background: var(--peligro-suave); }
button.whatsapp { background: #25d366; border-color: #22c55e; color: #053b1c; }
button.whatsapp:hover { background: #1fbe5a; }
button.fantasma { border-color: transparent; background: transparent; }
button.fantasma:hover { background: rgba(15, 23, 42, .06); }
.lateral button { background: transparent; color: #dce8e4; border-color: rgba(255,255,255,.2); width: 100%; }
.lateral button:hover { background: rgba(255,255,255,.08); }
button.icono { padding: 6px 9px; }
.grupo-botones { display: inline-flex; }
.grupo-botones button { border-radius: 0; margin-left: -1px; }
.grupo-botones button:first-child { border-radius: 8px 0 0 8px; margin-left: 0; }
.grupo-botones button:last-child { border-radius: 0 8px 8px 0; }
.grupo-botones button.activo { background: var(--primario-suave); border-color: var(--primario); color: var(--primario-oscuro); z-index: 1; }

input, select, textarea {
  font: inherit; color: inherit;
  border: 1px solid var(--borde-fuerte); border-radius: 8px;
  padding: 7px 10px; background: #fff; width: 100%;
}
textarea { resize: vertical; min-height: 70px; }
input:focus, select:focus, textarea:focus, button:focus-visible {
  outline: 2px solid rgba(15, 118, 110, .35); outline-offset: 1px; border-color: var(--primario);
}
input[type=checkbox] { width: auto; }
input[type=color] { padding: 2px; height: 36px; }
label.campo { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--texto-suave); }
label.campo > span .req { color: var(--peligro); }
label.check { display: flex; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; }
.rejilla { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.rejilla .ancho { grid-column: 1 / -1; }
.rejilla-2 { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.buscador { position: relative; min-width: 260px; }
.buscador input { padding-left: 32px; }
.buscador svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 16px; color: var(--texto-suave); }

.tarjeta { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); }
.tarjeta > .tit { padding: 14px 16px; border-bottom: 1px solid var(--borde); display: flex; align-items: center; gap: 8px; }
.tarjeta > .tit .acciones { margin-left: auto; display: flex; gap: 6px; }
.tarjeta > .dentro { padding: 16px; }
fieldset { border: 0; padding: 0; margin: 0 0 22px; }
fieldset legend { font-weight: 650; font-size: 13px; padding: 0 0 10px; color: var(--texto); text-transform: uppercase; letter-spacing: .04em; }

table.tabla { width: 100%; border-collapse: collapse; }
.tabla th { text-align: left; font-size: 12px; color: var(--texto-suave); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--borde); background: #f8fafc; position: sticky; top: 0; }
.tabla td { padding: 10px 12px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla tr.clic { cursor: pointer; }
.tabla tr.clic:hover td { background: #f8fafc; }
.vacio { text-align: center; padding: 40px 16px; color: var(--texto-suave); }

.etiqueta { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #f1f5f9; white-space: nowrap; }
.punto { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.alerta-medica { display: flex; gap: 8px; align-items: flex-start; background: var(--peligro-suave); color: #991b1b; border: 1px solid #fecaca; padding: 10px 12px; border-radius: 8px; font-weight: 550; }
.chip-alerta { color: var(--peligro); font-weight: 700; }
.aviso-caja { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; padding: 10px 12px; border-radius: 8px; }

/* ---------- Modal y avisos ---------- */
#capa-modal:empty { display: none; }
.fondo-modal { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); display: grid; place-items: center; padding: 20px; z-index: 50; }
.modal { background: #fff; border-radius: 14px; width: min(640px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.modal.ancho { width: min(860px, 100%); }
.modal.angosto { width: min(440px, 100%); }
.modal header { padding: 16px 20px; border-bottom: 1px solid var(--borde); display: flex; align-items: center; gap: 10px; }
.modal header button { margin-left: auto; }
.modal .dentro { padding: 18px 20px; overflow: auto; }
.modal footer { padding: 14px 20px; border-top: 1px solid var(--borde); display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.modal footer .izq { margin-right: auto; display: flex; gap: 8px; }
#avisos { position: fixed; bottom: 70px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 60; }
.aviso { background: #0f172a; color: #fff; padding: 10px 14px; border-radius: 10px; box-shadow: var(--sombra); max-width: 380px; animation: entra .2s ease-out; }
.aviso.error { background: #b91c1c; }
@keyframes entra { from { transform: translateY(8px); opacity: 0; } }

/* ---------- Acceso ---------- */
.acceso { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: var(--hueso); }
.acceso .logo-acceso { width: 220px; height: auto; display: block; margin: 0 auto 4px; }
.acceso .eslogan { text-align: center; color: var(--menta-profundo); font-weight: 700; margin: 0 0 22px; }
.acceso .tarjeta { width: min(420px, 100%); padding: 28px; }
.acceso .marca { padding: 0 0 18px; }
.acceso .marca b { color: var(--texto); font-size: 22px; }
.acceso .marca small { color: var(--texto-suave); }
.acceso form { display: flex; flex-direction: column; gap: 14px; }
.acceso .error { color: var(--peligro); font-weight: 550; min-height: 1em; }

/* ---------- Hoy ---------- */
.indicadores { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 16px; }
.indicador { padding: 14px 16px; }
.indicador b { display: block; font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.indicador span { color: var(--texto-suave); font-size: 12px; font-weight: 600; }
.columnas-hoy { display: grid; gap: 16px; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
.fila-cita { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--borde); }
.fila-cita:last-child { border-bottom: 0; }
.fila-cita .hora { font-weight: 700; font-variant-numeric: tabular-nums; }
.fila-cita .hora small { display: block; color: var(--texto-suave); font-weight: 500; }
.fila-cita .acciones { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.fila-cita .nombre { font-weight: 600; }

/* ---------- Agenda ---------- */
.agenda { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 16px; height: calc(100vh - 86px); }
.agenda-lado { display: flex; flex-direction: column; gap: 12px; overflow: auto; }
.mini-cal { padding: 12px; }
.mini-cal .mes { display: flex; align-items: center; justify-content: space-between; font-weight: 650; margin-bottom: 8px; }
.mini-cal .dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; font-size: 12px; }
.mini-cal .dias span { color: var(--texto-suave); font-size: 11px; padding: 4px 0; }
.mini-cal .dias button { border: 0; padding: 5px 0; border-radius: 6px; font-weight: 500; background: transparent; }
.mini-cal .dias button.fuera { color: #cbd5e1; }
.mini-cal .dias button.hoy { color: var(--primario); font-weight: 800; }
.mini-cal .dias button.sel { background: var(--primario); color: #fff; }
.filtros-estado { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.filtros-estado .tit-f { display: flex; justify-content: space-between; font-weight: 650; margin-bottom: 4px; }
.filtros-estado label { display: flex; align-items: center; gap: 8px; cursor: pointer; }

.agenda-principal { display: flex; flex-direction: column; min-height: 0; }
.barra-agenda { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.barra-agenda .fecha-tit { font-size: 17px; font-weight: 650; margin: 0 6px; }
.barra-agenda select { width: auto; }
.barra-agenda .derecha { margin-left: auto; display: flex; gap: 8px; }
.rejilla-agenda { flex: 1; overflow: auto; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); position: relative; }
.ra-cabeza { display: grid; position: sticky; top: 0; z-index: 5; background: #fff; border-bottom: 1px solid var(--borde); }
.ra-cabeza div { padding: 10px 8px; font-weight: 650; font-size: 13px; text-align: center; border-left: 1px solid var(--borde); display: flex; align-items: center; justify-content: center; gap: 6px; }
.ra-cabeza div:first-child { border-left: 0; }
.ra-cabeza div.hoy { color: var(--primario); }
.ra-cabeza div small { color: var(--texto-suave); font-weight: 500; }
.ra-cuerpo { display: grid; position: relative; }
.ra-horas div { height: var(--alto-fila); font-size: 11px; color: var(--texto-suave); text-align: right; padding: 2px 8px 0 0; border-top: 1px solid transparent; font-variant-numeric: tabular-nums; }
.ra-col { position: relative; border-left: 1px solid var(--borde); }
.ra-col.cerrado { background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 6px, #f1f5f9 6px, #f1f5f9 12px); }
.ra-hueco { height: var(--alto-fila); border-top: 1px solid #f1f5f9; cursor: pointer; }
.ra-hueco.hora-entera { border-top-color: var(--borde); }
.ra-hueco:hover { background: var(--primario-suave); }
.ra-hueco.sobre { background: #ccfbf1; }
.ra-ahora { position: absolute; left: 0; right: 0; height: 2px; background: var(--peligro); z-index: 3; pointer-events: none; }
.ra-ahora::before { content: ''; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--peligro); }
.cita {
  position: absolute; left: 3px; right: 3px; z-index: 2;
  border-radius: 7px; padding: 4px 7px; overflow: hidden;
  font-size: 12px; line-height: 1.25; cursor: pointer;
  border: 1px solid rgba(0,0,0,.06); border-left: 4px solid var(--c-estado);
  background: var(--c-fondo);
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.cita:hover { box-shadow: 0 3px 10px rgba(0,0,0,.15); z-index: 4; }
.cita.arrastrando { opacity: .5; }
.cita .c-hora { font-weight: 700; font-variant-numeric: tabular-nums; }
.cita .c-nom { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cita .c-mot { color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cita.cancelada { opacity: .55; text-decoration: line-through; }

/* Detalle de cita */
.detalle-cita .linea { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--borde); }
.detalle-cita .linea:last-child { border-bottom: 0; }
.detalle-cita .linea > span:first-child { width: 110px; color: var(--texto-suave); font-weight: 600; font-size: 12px; flex: none; padding-top: 2px; }
.estados-rapidos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.estados-rapidos button { font-size: 12px; padding: 5px 9px; }
.estados-rapidos button.activo { background: var(--primario-suave); border-color: var(--primario); }

/* Selector de paciente */
.selector-paciente { position: relative; }
.sugerencias { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid var(--borde-fuerte); border-radius: 8px; box-shadow: var(--sombra); z-index: 10; max-height: 260px; overflow: auto; }
.sugerencias button { display: flex; width: 100%; justify-content: space-between; border: 0; border-radius: 0; padding: 9px 12px; font-weight: 500; border-bottom: 1px solid var(--borde); text-align: left; }
.sugerencias button:hover, .sugerencias button.foco { background: var(--primario-suave); }
.sugerencias .nuevo { color: var(--primario); font-weight: 650; }
.paciente-elegido { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--primario); background: var(--primario-suave); border-radius: 8px; }
.paciente-elegido b { flex: 1; }

/* ---------- Pacientes ---------- */
.paginacion { display: flex; align-items: center; gap: 8px; justify-content: flex-end; padding: 12px 16px; }
.ficha-cabeza { display: flex; gap: 16px; align-items: center; padding: 18px 20px; background: var(--bosque); color: #fff; border-radius: var(--radio) var(--radio) 0 0; flex-wrap: wrap; }
.avatar { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.18); display: grid; place-items: center; font-size: 20px; font-weight: 700; flex: none; }
.ficha-cabeza h1 { color: #fff; }
.ficha-cabeza .datos { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: #dce8e4; margin-top: 4px; }
.ficha-cabeza .acciones { margin-left: auto; display: flex; gap: 8px; }
.ficha-cabeza .acciones button:not(.whatsapp) { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.25); }
.pestanas { display: flex; gap: 2px; border-bottom: 1px solid var(--borde); padding: 0 12px; background: #fff; overflow-x: auto; }
.pestanas button { border: 0; border-radius: 0; background: transparent; padding: 12px 14px; color: var(--texto-suave); border-bottom: 2px solid transparent; }
.pestanas button.activo { color: var(--primario); border-bottom-color: var(--primario); }
.pestanas button:disabled small { margin-left: 4px; font-size: 10px; border: 1px solid currentColor; border-radius: 6px; padding: 0 4px; }
.barra-guardar { position: sticky; bottom: 0; background: rgba(255,255,255,.95); border-top: 1px solid var(--borde); padding: 12px 16px; display: flex; justify-content: flex-end; gap: 8px; backdrop-filter: blur(4px); }

/* ---------- Configuración ---------- */
.config { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: start; }
.menu-config { display: flex; flex-direction: column; padding: 8px; }
.menu-config button { justify-content: flex-start; border: 0; background: transparent; }
.menu-config button.activo { background: var(--primario-suave); color: var(--primario-oscuro); }

@media (max-width: 1000px) {
  :root { --lateral: 64px; }
  .marca .logo, .marca small, .nav a span, .nav a small, .lateral .pie { display: none; }
  .marca .isotipo { display: block; }
  .nav a { justify-content: center; }
  .agenda { grid-template-columns: 1fr; height: auto; }
  .agenda-lado { display: none; }
  .rejilla-agenda { height: 70vh; }
  .columnas-hoy, .config { grid-template-columns: 1fr; }
}
@media print {
  .lateral, .barra-agenda .derecha, .agenda-lado { display: none; }
  .marco { display: block; }
}

/* Ajustes tras pruebas */
.config > section { overflow-x: auto; min-width: 0; }
.config .tabla td:last-child { white-space: nowrap; }
.config .tabla td b { white-space: nowrap; }
.sugerencias button.nuevo { justify-content: flex-start; }

/* ---------- Fase 2: ficha clínica ---------- */
.resumen-clinico { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 12px 16px 0; }
.resumen-caja { border: 1px solid var(--borde); border-radius: 8px; padding: 8px 12px; background: #f8fafc; font-size: 13px; min-width: 0; }
.resumen-caja b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); margin-bottom: 2px; }
.resumen-caja span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resumen-caja i { color: var(--texto-suave); }
.resumen-caja.alerta { background: var(--peligro-suave); border-color: #fecaca; color: #991b1b; }
.resumen-caja.alerta b { color: #b91c1c; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; }

.evolucion { border: 1px solid var(--borde); border-left: 4px solid var(--primario); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; background: #fff; }
.evolucion header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.evolucion .texto { white-space: pre-wrap; line-height: 1.5; }
.evolucion footer { margin-top: 8px; }
.evolucion.anulada { border-left-color: #94a3b8; opacity: .7; }
.evolucion.anulada .texto { text-decoration: line-through; }
.motivo-anulada { margin-top: 8px; font-size: 12px; color: #991b1b; }

.barra-odonto { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.odontograma { overflow-x: auto; padding: 8px 4px 4px; }
.lado-txt { display: flex; justify-content: space-between; font-size: 11px; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.fila-dientes { display: flex; gap: 18px; }
.fila-dientes .hemi { display: flex; gap: 4px; }
.fila-dientes .hemi:first-child { padding-right: 18px; border-right: 2px solid var(--borde-fuerte); }
.linea-media { height: 2px; background: var(--borde-fuerte); margin: 10px 0; }
.odonto-interior { width: max-content; margin: 0 auto; }
.diente { display: flex; flex-direction: column; align-items: center; width: 44px; gap: 2px; }
.diente-svg { width: 42px; height: 42px; display: block; }
.diente .cara { stroke: #64748b; stroke-width: 1; cursor: pointer; transition: opacity .1s; }
.diente .cara:hover { opacity: .65; stroke: var(--primario); stroke-width: 1.6; }
.diente .num { border: 0; background: transparent; padding: 2px 4px; font-size: 12px; font-weight: 700; color: var(--texto); border-radius: 5px; }
.diente .num:hover { background: var(--primario-suave); color: var(--primario); }
.diente .marcas { height: 14px; display: flex; gap: 3px; font-size: 10px; font-weight: 800; line-height: 14px; }
.leyenda-odonto { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; margin-top: 14px; font-size: 12px; color: var(--texto-suave); }
.leyenda-odonto i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -2px; }
.pendientes-odonto { margin-top: 14px; background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; padding: 10px 12px; border-radius: 8px; font-size: 13px; }
.selector-caras { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.fila-anulada td { color: var(--texto-suave); text-decoration: line-through; }
.fila-anulada td:last-child, .fila-anulada td .suave { text-decoration: none; }

@media print {
  .contenido { overflow: visible; }
  .pestanas, .ficha-cabeza .acciones, .barra-guardar, .nueva-evolucion, .barra-odonto button, [data-anular], .cabecera a { display: none !important; }
  .tarjeta { box-shadow: none; border: 0; }
  .ficha-cabeza { background: none; color: #000; border-bottom: 2px solid #000; }
  .ficha-cabeza h1, .ficha-cabeza .datos { color: #000; }
}

/* ---------- Fase 3: planes, presupuestos y ortodoncia ---------- */
.lista-planes { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.plan-tarjeta { display: flex; flex-direction: column; align-items: stretch; gap: 6px; text-align: left; padding: 14px 16px; white-space: normal; font-weight: 400; border-color: var(--borde); }
.plan-tarjeta:hover { border-color: var(--primario); background: #fff; box-shadow: var(--sombra); }
.pt-cabeza { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pt-cabeza b { font-size: 15px; margin-right: auto; }
.pt-montos { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--texto-suave); }
.pt-montos b { color: var(--texto); }
.barra-avance { height: 6px; background: #e2e8f0; border-radius: 99px; overflow: hidden; margin: 4px 0; }
.barra-avance i { display: block; height: 100%; background: var(--primario); border-radius: 99px; }

.plan-rejilla { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: start; }
.plan-resumen { padding: 16px; display: flex; flex-direction: column; gap: 6px; position: sticky; top: 12px; }
.pr-total { background: var(--primario-suave); border-radius: 8px; padding: 12px; text-align: center; margin-bottom: 6px; }
.pr-total span { display: block; font-size: 12px; color: var(--primario-oscuro); font-weight: 600; }
.pr-total b { font-size: 24px; color: var(--primario-oscuro); letter-spacing: -.02em; }
.pr-linea { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 3px 0; border-bottom: 1px dashed var(--borde); }
.pr-linea.fuerte { font-weight: 700; border-bottom: 0; }
.pr-pago { background: #f8fafc; border-radius: 8px; padding: 8px 10px; font-size: 13px; margin-top: 6px; }
.pr-pago b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); }
.pr-acciones { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.tabla-items tr.realizado td { background: #f0fdf4; }
.agregar-item { display: flex; gap: 8px; padding: 14px 16px; flex-wrap: wrap; border-top: 1px solid var(--borde); background: #f8fafc; }
.agregar-item select { flex: 2 1 220px; }
.agregar-item [data-desc] { flex: 2 1 200px; width: auto; }

.orto-resumen { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 16px; }
.orto-dato { border: 1px solid var(--borde); border-radius: 8px; padding: 10px 12px; background: #f8fafc; }
.orto-dato.ancho { grid-column: span 2; }
.orto-dato span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); font-weight: 600; margin-bottom: 3px; }
.orto-dato small { display: block; color: var(--texto-suave); font-size: 11px; }
.curva-higiene { display: flex; align-items: flex-end; gap: 4px; height: 30px; }
.curva-higiene i { width: 12px; border-radius: 3px 3px 0 0; }
.curva-higiene i.vacia { height: 3px; background: #cbd5e1; }
.orto-diag { border: 1px solid var(--borde); border-radius: 8px; padding: 12px 14px; }
.orto-diag summary { cursor: pointer; }
.orto-diag[open] summary { margin-bottom: 14px; }
.fila-alerta td { background: #fff7f7; }

/* Presupuesto imprimible */
.hoja { background: #fff; max-width: 820px; margin: 0 auto; padding: 40px 48px; border: 1px solid var(--borde); border-radius: 6px; box-shadow: var(--sombra); }
.hoja-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; border-bottom: 3px solid var(--primario); padding-bottom: 16px; }
.hoja-cabeza .marca { padding: 0; }
.hoja-cabeza .marca b { color: var(--texto); font-size: 20px; }
.hoja-cabeza .marca small { color: var(--texto-suave); }
.hoja-folio { text-align: right; display: flex; flex-direction: column; font-size: 13px; color: var(--texto-suave); }
.hoja-folio b { font-size: 16px; color: var(--texto); }
.hoja-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin: 20px 0; }
.hoja-datos span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); }
.hoja-datos small { display: block; color: var(--texto-suave); }
.hoja-tabla th { background: #f1f5f9; position: static; }
.hoja-totales { margin-left: auto; width: 300px; margin-top: 12px; }
.hoja-totales div { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid var(--borde); }
.hoja-totales .fuerte { font-size: 17px; font-weight: 800; border-bottom: 3px double var(--texto); }
.hoja-nota { margin-top: 18px; font-size: 13px; }
.hoja-nota b { display: block; margin-bottom: 2px; }
.hoja-legal { font-size: 11px; color: var(--texto-suave); margin-top: 24px; }
.hoja-firmas { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-top: 70px; text-align: center; font-size: 13px; }
.hoja-firmas i { display: block; border-top: 1px solid var(--texto); margin-bottom: 6px; }

@media (max-width: 1000px) { .plan-rejilla { grid-template-columns: 1fr; } .plan-resumen { position: static; } }
@media print {
  .no-imprimir { display: none !important; }
  .hoja { border: 0; box-shadow: none; padding: 0; max-width: none; }
  .cuerpo { padding: 0; }
  body { background: #fff; }
}
.plan-rejilla > section { overflow-x: auto; }
.tabla-items td:nth-child(2) { min-width: 160px; }
[data-sub-panel] > .dentro { padding: 16px; }
.config [data-c=nombre] { min-width: 280px; }
.config [data-c=categoria] { min-width: 130px; }
.config [data-c=precio] { width: 120px; }

/* ---------- Fase 4: pagos y caja ---------- */
.recibo { position: relative; overflow: hidden; }
.recibo-monto { text-align: center; margin: 26px 0 10px; display: flex; flex-direction: column; gap: 2px; }
.recibo-monto span { color: var(--texto-suave); font-size: 13px; }
.recibo-monto b { font-size: 18px; }
.recibo-monto strong { font-size: 34px; letter-spacing: -.02em; color: var(--primario-oscuro); }
.sello-anulado { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%) rotate(-18deg); font-size: 90px; font-weight: 900; color: rgba(220, 38, 38, .18); border: 8px solid rgba(220, 38, 38, .18); padding: 0 30px; border-radius: 16px; pointer-events: none; }
@media print {
  .barra-agenda .grupo-botones, [data-anular-pago], [data-anular-gasto], [data-gasto], [data-cerrar-caja], [data-reabrir], .cabecera .acciones { display: none !important; }
}
.columnas-hoy > * { min-width: 0; }
.columnas-hoy > section { overflow-x: auto; }
.validar-online { margin-bottom: 16px; border-left: 4px solid #a855f7; }

/* Horarios y bloqueos en la agenda */
.ra-hueco.fuera { background: repeating-linear-gradient(135deg, #f8fafc, #f8fafc 5px, #eef2f6 5px, #eef2f6 10px); }
.ra-hueco.fuera:hover { background: #e2e8f0; }
.bloqueo { position: absolute; left: 0; right: 0; z-index: 1; background: repeating-linear-gradient(135deg, rgba(100,116,139,.18), rgba(100,116,139,.18) 6px, rgba(100,116,139,.28) 6px, rgba(100,116,139,.28) 12px); border-top: 2px solid #64748b; cursor: pointer; overflow: hidden; }
.bloqueo span { display: inline-block; margin: 3px 5px; font-size: 11px; font-weight: 700; color: #334155; background: rgba(255,255,255,.85); padding: 1px 6px; border-radius: 4px; }

/* ---------- Recetas, archivos, consentimientos, reportes ---------- */
.fila-med { display: grid; grid-template-columns: 2.2fr 1.2fr 1.2fr 1fr 1.6fr auto; gap: 6px; margin-bottom: 6px; }
@media (max-width: 1000px) { .fila-med { grid-template-columns: 1fr 1fr; } }
.rx { font-family: Georgia, serif; font-size: 34px; font-weight: 700; font-style: italic; color: var(--primario); margin: 10px 0 4px; }
.receta-lista { padding-left: 22px; line-height: 1.5; }
.receta-lista li { margin-bottom: 12px; }
.consentimiento-texto { white-space: pre-wrap; line-height: 1.6; font-size: 13.5px; margin-top: 20px; text-align: justify; }
.zona-subida { border: 2px dashed var(--borde-fuerte); border-radius: 12px; padding: 18px; text-align: center; background: #f8fafc; }
.zona-subida.sobre { border-color: var(--primario); background: var(--primario-suave); }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.miniatura { margin: 0; border: 1px solid var(--borde); border-radius: 10px; overflow: hidden; background: #fff; cursor: pointer; position: relative; }
.miniatura:hover { box-shadow: var(--sombra); }
.miniatura.sel { outline: 3px solid var(--primario); }
.miniatura img, .miniatura .icono-pdf { width: 100%; height: 140px; object-fit: cover; display: block; background: #0f172a; }
.miniatura .icono-pdf { display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 22px; background: #b91c1c; }
.miniatura figcaption { padding: 8px 10px; font-size: 12px; display: flex; flex-direction: column; gap: 1px; }
.miniatura figcaption span { color: var(--texto-suave); }
.miniatura .marcar { position: absolute; top: 6px; left: 6px; background: rgba(255,255,255,.9); border-radius: 6px; padding: 2px 4px; }
.visor { max-width: 100%; max-height: 60vh; display: block; margin: 0 auto; border-radius: 8px; background: #0f172a; }
.modal.comparar { width: min(1200px, 100%); }
.comparacion { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.comparacion figure { margin: 0; text-align: center; }
.comparacion img { width: 100%; max-height: 70vh; object-fit: contain; background: #0f172a; border-radius: 8px; }
.boton-reportar { position: fixed; right: 18px; bottom: 18px; z-index: 40; border-radius: 999px; box-shadow: var(--sombra); background: #fff; }
@media print { .boton-reportar { display: none !important; } }

/* ---------- Reportes ---------- */
.titulo-mes { margin: 0 0 6px; }
.seccion-rep { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave); margin: 18px 0 10px; }
.kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.kpi { padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.kpi-arriba { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; }
.kpi b { display: block; font-size: 24px; font-weight: 750; letter-spacing: -.02em; }
.kpi span { display: block; color: var(--texto-suave); font-size: 12px; font-weight: 600; }
.kpi .cambio { font-weight: 500; margin-top: 4px; }
.cambio.sube { color: #15803d; }
.cambio.baja { color: #b91c1c; }
.sparkline { flex: none; }
.rejilla-rep { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 18px; }
.panel-rep.ancho-2 { grid-column: 1 / -1; }
.grafica { max-width: 100%; display: block; }
.leyenda { display: flex; gap: 16px; font-size: 12px; color: var(--texto-suave); margin-bottom: 6px; }
.leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.tabla-grafica { margin-top: 8px; font-size: 12px; }
.tabla-grafica summary { cursor: pointer; color: var(--texto-suave); }
.tooltip-grafica { position: fixed; z-index: 80; display: none; pointer-events: none; background: #0f172a; color: #fff; padding: 8px 10px; border-radius: 8px; font-size: 12px; line-height: 1.5; box-shadow: var(--sombra); }
.tooltip-grafica i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }
.barras-h { display: flex; flex-direction: column; gap: 10px; }
.bh-fila { display: grid; grid-template-columns: 130px 1fr 92px; gap: 10px; align-items: center; font-size: 13px; }
.bh-etiqueta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-pista { height: 14px; display: block; }
.bh-pista i { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.bh-valor { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.numero-grande { font-size: 30px; color: var(--primario-oscuro); }
@media (max-width: 1000px) { .rejilla-rep { grid-template-columns: 1fr; } }

/* ---------- Historial ---------- */
.hist-filtros { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.hist-filtros button { border-radius: 999px; font-weight: 500; font-size: 12px; padding: 5px 10px; }
.hist-filtros button.activo { background: var(--primario); border-color: var(--primario); color: #fff; }
.hist-mes { margin: 18px 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave); }
.historial { border-left: 2px solid var(--borde); margin-left: 14px; }
.hist-evento { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; padding: 8px 0 8px 0; margin-left: -15px; align-items: start; }
.hist-icono { width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 2px solid var(--borde); display: grid; place-items: center; font-size: 13px; }
.hist-tit { font-weight: 600; }
.hist-detalle { color: var(--texto-suave); font-size: 13px; white-space: pre-wrap; }
.hist-img { margin-top: 6px; max-width: 160px; max-height: 110px; border-radius: 8px; object-fit: cover; }
.hist-evento time { font-size: 12px; color: var(--texto-suave); text-align: right; white-space: nowrap; }
.hist-evento time span { font-size: 11px; }
.hist-evento.tachado .hist-tit { text-decoration: line-through; color: var(--texto-suave); }

/* ---------- Ayuda / manual ---------- */
.manual-cuerpo { columns: 2 320px; column-gap: 28px; margin-top: 18px; }
.manual-cuerpo section { break-inside: avoid; margin-bottom: 14px; }
.manual-cuerpo h3 { font-size: 14px; color: var(--primario-oscuro); margin-bottom: 6px; }
.manual-cuerpo ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; }
.manual-cuerpo li { margin-bottom: 4px; }
.manual-cuerpo code { background: #f1f5f9; padding: 1px 5px; border-radius: 4px; font-size: 12px; }
@media print { .manual .manual-cuerpo { font-size: 11px; } .manual-cuerpo ul { font-size: 11.5px; line-height: 1.4; } }

/* ---------- Identidad Ortomind: ajustes finales ---------- */
.nav a.activo { background: rgba(119, 181, 169, .22); color: #fff; }
.nav a.activo svg { color: var(--arena); }
button.primario:hover, .boton.primario:hover { background: var(--bosque); border-color: var(--bosque); }
.etiqueta { font-weight: 700; }
fieldset legend, .seccion-rep, .hist-mes, .resumen-caja b { letter-spacing: .08em; }
.ficha-cabeza .avatar { background: rgba(230, 213, 184, .2); color: var(--arena); }
.acceso .tarjeta { box-shadow: 0 10px 40px rgba(29, 59, 52, .12); border: 0; }
.hoja { font-size: 13.5px; }
.hoja-cabeza { border-bottom: 2px solid var(--bosque); }
.hoja-legal { color: var(--bosque); font-size: 9.5pt; }
.hoja-pie { margin-top: 26px; padding-top: 8px; border-top: 1px solid var(--piedra); font-size: 9pt; color: var(--bosque); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hoja-doctor { text-align: right; font-size: 12px; color: var(--menta-profundo); line-height: 1.4; }
.hoja-doctor b { color: var(--bosque); font-size: 13px; }
@media print { .hoja { padding: 0 !important; } @page { margin: 18mm; } }

/* ---------- Documentos de cumplimiento ---------- */
.doc-aviso { margin-bottom: 8px; }
.doc-lista { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.doc-tarjeta { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); color: var(--bosque); }
.doc-tarjeta:hover { border-color: var(--menta); box-shadow: var(--sombra); text-decoration: none; }
.doc-tarjeta b { font-size: 14.5px; line-height: 1.3; }
.doc-codigo, .doc-etiqueta { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--menta-profundo); }
.documentos-hojas { display: flex; flex-direction: column; gap: 22px; }
.documento { max-width: 860px; }
.doc-cabeza .hoja-folio { max-width: 62%; }
.doc-cabeza .hoja-folio b { font-size: 17px; font-weight: 800; line-height: 1.25; }
.doc-control { width: 100%; border-collapse: collapse; margin: 12px 0 6px; font-size: 11px; }
.doc-control td { border: 1px solid var(--piedra); padding: 5px 8px; vertical-align: top; color: var(--bosque); }
.doc-control td span { display: block; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--menta-profundo); }
.doc-control td.ancho { width: 46%; }
.doc-sec { margin-top: 14px; break-inside: auto; }
.doc-sec h3 { font-size: 13.5px; font-weight: 800; color: var(--bosque); margin-bottom: 5px; break-after: avoid; }
.doc-sec p, .doc-sec li { font-size: 12.5px; line-height: 1.55; color: var(--bosque); margin: 0 0 6px; }
.doc-sec ul, .doc-sec ol { margin: 0 0 6px; padding-left: 20px; }
.doc-tabla { width: 100%; border-collapse: collapse; font-size: 11.5px; margin: 4px 0 8px; }
.doc-tabla th { background: var(--hueso); color: var(--bosque); font-weight: 800; text-align: left; padding: 6px 7px; border: 1px solid var(--piedra); }
.doc-tabla td { border: 1px solid var(--piedra); padding: 5px 7px; vertical-align: top; color: var(--bosque); }
.doc-tabla tr { break-inside: avoid; }
.doc-bitacora td { height: 26px; }
.doc-bitacora th { font-size: 10.5px; }
.doc-instr { font-size: 11.5px; color: var(--bosque); }
.doc-revision { margin-top: 14px; font-size: 11.5px; color: var(--bosque); }
.doc-firmas { grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; margin-top: 46px !important; font-size: 11.5px; }
.doc-firmas-sec { break-inside: avoid; }
@media print {
  .documentos-hojas { display: block; }
  .documentos-hojas .documento { break-after: page; max-width: none; }
  .documentos-hojas .documento:last-child { break-after: auto; }
}

/* ---------- Análisis de pacientes ---------- */
.filtros-analisis { align-items: flex-end; gap: 10px; }
.filtros-analisis .campo { width: 170px; }
.embudo { display: flex; flex-direction: column; gap: 14px; margin: 6px 0 14px; }
.embudo-fila { display: grid; grid-template-columns: minmax(140px, 1fr) 2fr auto; gap: 10px; align-items: center; font-size: 13px; }
.embudo-fila .bh-pista { height: 22px; }
.embudo-fila .bh-pista i { border-radius: 0 4px 4px 0; }
.embudo-val { white-space: nowrap; font-variant-numeric: tabular-nums; }
.rejilla-perfil { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla-globales { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 20px; }
.global { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.global-cabeza b { display: block; font-size: 24px; font-weight: 800; }
.global-cabeza span { display: block; font-size: 12px; font-weight: 700; color: var(--texto-suave); }
.global-cabeza small { display: block; font-size: 11px; color: var(--texto-suave); }
.global-meses { display: flex; justify-content: space-around; font-size: 10px; color: var(--texto-suave); }
@media (max-width: 1200px) { .rejilla-perfil { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rejilla-globales { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bh-valor { text-align: right; }
.validar-online.reagendar { border-left-color: #d97706; }

/* ---------- Seguimiento (tareas de gestión) ---------- */
.nav a .contador { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 750; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--menta, #77b5a9); color: #1d3b34; text-align: center; }
tr.clic { cursor: pointer; }
tr.clic:hover td { background: #f6f3ec; }
.aviso-seguimiento { display: flex; gap: 10px; align-items: center; padding: 12px 16px; margin-bottom: 16px; color: inherit; text-decoration: none; border-left: 4px solid #2f7d6d; }
.aviso-seguimiento:hover { background: #f6f3ec; }
.cal-tareas { padding: 12px 16px 16px; }
.cal-cabeza { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 10px; font-size: 16px; }
.cal-rejilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-sem { text-align: center; font-size: 12px; font-weight: 650; color: var(--texto-suave); padding: 4px 0; }
.cal-dia { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 64px; padding: 6px 8px; border: 1px solid var(--borde); border-radius: 8px; background: #fff; text-align: left; }
.cal-dia span { font-size: 13px; color: var(--texto-suave); }
.cal-dia b { font-size: 12px; background: #2f7d6d; color: #fff; border-radius: 999px; padding: 0 8px; }
.cal-dia small { font-size: 11px; color: var(--texto-suave); }
.cal-dia.fuera { opacity: .45; }
.cal-dia.hoy span { color: #2f7d6d; font-weight: 800; }
.cal-dia.elegido { border-color: #2f7d6d; box-shadow: 0 0 0 2px rgba(47, 125, 109, .2); }
.lista-comentarios { display: flex; flex-direction: column; gap: 10px; max-height: 260px; overflow: auto; }
.lista-comentarios > div { padding: 8px 10px; background: #f6f3ec; border-radius: 8px; white-space: pre-wrap; }
.opciones-final { display: flex; flex-direction: column; gap: 10px; }
.opciones-final .check { align-items: flex-start; }
@media (max-width: 640px) { .cal-dia { min-height: 48px; padding: 4px; } }
.opciones-final input[type=radio] { width: auto; flex: none; margin: 3px 0 0; }
.opciones-final .check > span { flex: 1; }