/* componentes.css — piezas reutilizables de la app.
   Detalle de marca: la pestaña activa lleva la "sonrisa" naranja del logo
   OKO debajo. Es el único adorno; lo demás se mantiene sobrio. */

/* ── Banda de base de prueba ──────────────────────────────────── */
.banda-prueba {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 0.35rem 1rem;
  text-align: center;
  font-size: var(--t-chico);
  font-weight: 600;
  color: #3d2800;
  background: repeating-linear-gradient(-45deg, #ffd27a 0 14px, #ffc24d 14px 28px);
}

/* Banda sin conexión: debajo de la de prueba, color de alerta sobrio */
.banda-sin-conexion {
  padding: 0.4rem 1rem;
  text-align: center;
  font-size: var(--t-chico);
  font-weight: 600;
  color: #fff;
  background: var(--marino-2);
  border-bottom: 3px solid var(--naranja);
}

/* ── Login / cargando / sin rol ───────────────────────────────── */
.logo-grande { width: 96px; height: 96px; border-radius: 20px; margin: 0 auto; }

.cargando-texto { color: #dbe4ef; text-align: center; }

.tarjeta-login {
  width: min(100%, 380px);
  display: grid;
  gap: 0.6rem;
  padding: 2rem 1.75rem;
  background: var(--superficie);
  border-radius: 14px;
  border-top: 5px solid var(--naranja);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}
.tarjeta-login .logo-grande { margin-bottom: 0.25rem; }
.login-titulo { font-size: var(--t-medio); text-align: center; margin-bottom: 0.5rem; }
.tarjeta-login label { font-size: var(--t-chico); font-weight: 600; color: var(--tinta-suave); }
.tarjeta-login .btn { margin-top: 0.5rem; }

.codigo-uid {
  display: block;
  padding: 0.6rem;
  font-size: var(--t-chico);
  word-break: break-all;
  background: var(--fondo);
  border: 1px dashed var(--linea);
  border-radius: var(--radio-chico);
  user-select: all;
}

/* ── Campos y botones ─────────────────────────────────────────── */
input, select, textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1.5px solid var(--linea);
  border-radius: var(--radio-chico);
  background: var(--superficie);
}
input:focus, select:focus, textarea:focus { border-color: var(--marino-2); outline: none; box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.35); }

.btn {
  padding: 0.6rem 1.1rem;
  min-height: 44px;                 /* objetivo táctil en tablet */
  border: 1.5px solid var(--linea);
  border-radius: var(--radio-chico);
  background: var(--superficie);
  font-weight: 600;
  cursor: pointer;
}
.btn:disabled { opacity: 0.6; cursor: progress; }
.btn--primario { background: var(--marino); border-color: var(--marino); color: #fff; }
.btn--primario:hover { background: var(--marino-2); }
.btn--claro { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.35); min-height: 36px; padding: 0.3rem 0.9rem; }
.btn--claro:hover { border-color: var(--naranja); }

/* ── Encabezado ───────────────────────────────────────────────── */
.encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  background: var(--marino);
  color: #fff;
}
.marca { display: flex; align-items: center; gap: 0.6rem; }
.marca__nombre { font-size: var(--t-medio); font-weight: 700; letter-spacing: 0.01em; }
.encabezado__derecha { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }

.usuario { display: grid; line-height: 1.2; text-align: right; }
.usuario__correo { font-size: var(--t-chico); color: #c9d5e3; }
.usuario__rol { font-size: var(--t-chico); font-weight: 700; color: var(--naranja); }

/* Indicador de nube */
.nube {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--t-chico);
  font-weight: 600;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}
.nube::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.nube--ok { color: #7ee2a8; }
.nube--espera { color: #c9d5e3; }
.nube--alerta { color: #ffd27a; }
.nube--error { color: #ff9b94; }

/* Chip de pendientes en el encabezado */
.chip {
  font-size: var(--t-chico);
  font-weight: 700;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  white-space: nowrap;
}
/* v19: la etiqueta del encabezado es un botón que lleva a Inicio → "Por revisar". */
button.chip { border: 0; font-family: inherit; cursor: pointer; line-height: inherit; }
.chip--alerta { background: #ffd27a; color: #3d2800; }
.chip--error { background: #ffb4ae; color: #5c0f0a; }

/* ── Pestañas ─────────────────────────────────────────────────── */
.pestanas {
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  padding: 0 0.75rem 12px;
  background: var(--marino);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  scrollbar-width: thin;
}
.pestana {
  position: relative;
  flex: 0 0 auto;
  padding: 0.7rem 0.9rem 0.55rem;
  min-height: 44px;
  background: none;
  border: 0;
  color: #b7c5d6;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.pestana:hover { color: #fff; }
.pestana--activa { color: #fff; }
/* La sonrisa del logo bajo la pestaña activa */
.pestana--activa::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -12px;
  width: 26px;
  height: 12px;
  transform: translateX(-50%);
  background: var(--naranja);
  border-radius: 0 0 26px 26px;
}

/* ── Paneles ──────────────────────────────────────────────────── */
.panel {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 1.25rem;
  max-width: 760px;
}
.panel__titulo { font-size: var(--t-medio); margin: 1.25rem 0 0.6rem; }
.panel__titulo:first-child { margin-top: 0; }
.panel--pendiente { border-left: 4px solid var(--naranja); }
.panel--pendiente p + p { margin-top: 0.5rem; }

.nota { color: var(--tinta-suave); }
.etiqueta-acceso {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  font-size: var(--t-chico);
  font-weight: 700;
  color: var(--marino);
  background: #fff3dc;
  border-radius: var(--radio-chico);
}

/* Lista de datos clave: valor */
.datos { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1.25rem; }
.datos dt { color: var(--tinta-suave); }
.datos dd { font-weight: 600; word-break: break-word; }

/* Tabla compacta */
.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-chico); }
.tabla th { text-align: left; font-weight: 700; color: var(--tinta-suave); padding: 0.45rem 0.6rem; border-bottom: 2px solid var(--linea); }
.tabla td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--linea); }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }

.txt-ok { color: var(--ok); font-weight: 600; }
.txt-error { color: var(--error); font-weight: 600; min-height: 1.2em; }
.txt-alerta { color: var(--alerta); font-weight: 600; }

/* Casos por revisar (Inicio) */
.lista-casos { margin: 0.6rem 0 0.4rem 1.1rem; font-size: var(--t-chico); }
.lista-casos li + li { margin-top: 0.25rem; }

/* Diálogo */
.dialogo {
  margin: auto;
  width: min(92vw, 420px);
  padding: 1.5rem;
  border: 0;
  border-top: 5px solid var(--naranja);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  color: var(--tinta);
}
.dialogo::backdrop { background: rgba(0, 31, 63, 0.55); }
.dialogo__titulo { font-size: var(--t-medio); margin-bottom: 0.6rem; }
.dialogo p { margin-bottom: 1rem; }
/* E7 T0 (v48): confirmación dentro de la página (ui/confirmacion.js) — reemplaza window.confirm */
.dialogo--confirmar .dialogo__cuerpo p:last-child { margin-bottom: 1.2rem; }
.dialogo__acciones { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: flex-end; }
.dialogo__acciones .btn { flex: 1 1 auto; }
/* E7 T1 (v49): Administración (respaldo, comparar, diagnóstico) */
.adm-estado { margin-top: 0.75rem; }
.adm-tabla td.num { white-space: nowrap; }
.adm-dif td:first-child { font-weight: 700; }
.adm-archivo { display: block; margin: 0.5rem 0; }
/* E7 T2 (v50): Ventas y caja */
.vc-subs { margin: 0.25rem 0 0.75rem; }
.vc-periodo { margin: 0.25rem 0 0.5rem; color: var(--tinta-suave, #555); }
.vc-fila { cursor: pointer; }
.vc-fila:hover { background: var(--fondo); }

/* ── Aviso de actualización (actualizacion.js) ────────────────── */
.barra-actualizacion {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  z-index: 100;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 0.75rem 0.6rem 1.1rem;
  color: #fff;
  background: var(--marino);
  border-radius: var(--radio);
  border-bottom: 3px solid var(--naranja);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.btn-actualizar {
  padding: 0.45rem 0.9rem;
  border: 0;
  border-radius: var(--radio-chico);
  background: var(--naranja);
  color: var(--marino);
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 640px) {
  .usuario { display: none; }
  .datos { grid-template-columns: 1fr; }
}

/* ═══ E1b: pantallas, filtros, listas y fichas ═══════════════════ */
.pantalla { position: relative; }
.pantalla__cabecera { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.pantalla__titulo { font-size: var(--t-grande); }
.pantalla__pie { margin-top: 0.9rem; }

.filtros { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.75rem; }
.filtros select, .filtros input { width: auto; min-height: 40px; }
.filtros__buscar { flex: 1 1 260px; }
.filtros__check { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--t-chico); font-weight: 600; color: var(--tinta-suave); }
.filtros__check input { width: auto; }

.btn--texto { background: none; border-color: transparent; color: var(--marino-2); text-decoration: underline; min-height: 36px; padding: 0.3rem 0.5rem; }

.lista { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); }
.lista__barra { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; background: #fff3dc; border-bottom: 1px solid var(--linea); border-radius: var(--radio) var(--radio) 0 0; }
.lista__contador { font-weight: 700; margin-right: 0.5rem; }
.lista__pie { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0.75rem; border-top: 1px solid var(--linea); }
.lista__vacio { text-align: center; color: var(--tinta-suave); padding: 1.5rem !important; }
.tabla-scroll { overflow-x: auto; }
.tabla--lista td, .tabla--lista th { white-space: nowrap; }
.tabla--lista .fila { cursor: pointer; }
.tabla--lista .fila:hover, .tabla--lista .fila:focus-visible { background: #f5f8fc; }
.col-check { width: 44px; text-align: center; }
.col-check input { width: 20px; height: 20px; cursor: pointer; }
.fila--pendiente td:first-child { box-shadow: inset 4px 0 0 var(--naranja); }
.fila--inactiva { color: var(--tinta-suave); }

/* Ficha: panel lateral en escritorio, pantalla completa en celular */
.ficha-fondo { position: fixed; inset: 0; z-index: 60; background: rgba(0, 31, 63, 0.35); }
.ficha {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
  width: min(100%, 560px); display: flex; flex-direction: column;
  background: var(--superficie); box-shadow: -10px 0 30px rgba(0, 0, 0, 0.2);
  border-left: 4px solid var(--naranja);
}
.ficha__cabecera { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem 0.5rem; }
.ficha__titulo { font-size: var(--t-medio); }
.ficha__avisos { padding: 0 1.25rem; }
.ficha__cuerpo { flex: 1; overflow-y: auto; padding: 0.5rem 1.25rem 1rem; }
.ficha__acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.75rem 1.25rem; border-top: 1px solid var(--linea); }
.ficha__seccion { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--linea); }
.ficha__seccion h3 { font-size: var(--t-base); margin-bottom: 0.35rem; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.75rem 1rem; }
.campo { display: grid; gap: 0.25rem; }
.campo label { font-size: var(--t-chico); font-weight: 600; color: var(--tinta-suave); }
.campo label.obligatorio::after { content: ' *'; color: var(--error); }
.campo__ayuda { font-size: 0.75rem; color: var(--tinta-suave); }
.campo textarea { width: 100%; min-height: 72px; padding: 0.6rem 0.75rem; border: 1.5px solid var(--linea); border-radius: var(--radio-chico); resize: vertical; }
.campo input:disabled, .campo select:disabled, .campo textarea:disabled { background: var(--fondo); color: var(--tinta); }

.aviso { padding: 0.5rem 0.75rem; border-radius: var(--radio-chico); font-size: var(--t-chico); font-weight: 600; margin-bottom: 0.5rem; }
.aviso--alerta { background: #fff3dc; color: #6b4500; }
.aviso--error { background: #fde7e5; color: #7a1a13; }

/* Avisos breves (toasts) */
.avisos { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 90; display: grid; gap: 0.5rem; width: min(92vw, 460px); pointer-events: none; }
.toast { padding: 0.65rem 0.9rem; border-radius: var(--radio); font-size: var(--t-chico); font-weight: 600; color: #fff; background: var(--marino); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); }
.toast--ok { border-left: 4px solid #7ee2a8; }
.toast--alerta { border-left: 4px solid var(--naranja); }
.toast--error { border-left: 4px solid #ff9b94; }

/* Casos por revisar (Inicio) */
.caso { border: 1px solid var(--linea); border-left: 4px solid var(--error); border-radius: var(--radio); padding: 0.9rem 1rem; margin-bottom: 0.75rem; }
.caso h3 { font-size: var(--t-base); margin-bottom: 0.25rem; }
.caso .tabla { margin: 0.5rem 0; }
.caso__acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }

@media (min-width: 900px) {
  .avisos { left: auto; right: 1rem; top: 5.5rem; bottom: auto; transform: none; width: 380px; }
}
@media (max-width: 640px) {
  .filtros select { flex: 1 1 45%; }
  .ficha { width: 100%; border-left: 0; }
}

/* ── E2a: hoja del QR universal (solo se ve al imprimir) ───────────── */
.hoja-qr { display: none; }
@media print {
  @page { size: letter; margin: 1.2cm; }
  body.imprimiendo > *:not(#hoja-impresion) { display: none !important; }
  body.imprimiendo { background: #fff; }
  body.imprimiendo #hoja-impresion { display: block; text-align: center; color: #000; font-family: inherit; }
  .hoja-qr__prueba { border: 3px solid #000; padding: 0.3cm; font-weight: 800; font-size: 16pt; margin-bottom: 0.4cm; }
  .hoja-qr__marca { font-size: 14pt; font-weight: 800; letter-spacing: 0.08em; color: #001f3f; text-transform: uppercase; }
  .hoja-qr__titulo { font-size: 26pt; margin: 0.3cm 0; color: #001f3f; }
  .hoja-qr__sub { font-size: 14pt; margin: 0 auto 0.6cm; max-width: 15cm; }
  .hoja-qr__qr svg { width: 11cm; height: 11cm; }
  .hoja-qr__url { font-size: 10pt; margin-top: 0.2cm; word-break: break-all; }
  .hoja-qr__aviso { font-size: 14pt; font-weight: 700; margin-top: 0.6cm; border-top: 4px solid #f39c12; padding-top: 0.4cm; }
  .hoja-qr__nota { font-size: 10pt; margin-top: 0.3cm; }
}

/* ── E2a.3: Cerrar jornada en el panel, Sala de espera y autorización (D4) ── */
.panel__acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.sala-resumen { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.chip-sala { padding: 0.2rem 0.6rem; border-radius: 999px; font-size: var(--t-chico); font-weight: 600; border: 1px solid var(--linea); background: var(--superficie); }
.chip-sala--esperando { border-color: var(--naranja); color: var(--naranja-hondo); }
.chip-sala--en_atencion { border-color: var(--marino-2); color: var(--marino-2); }
.chip-sala--atendido { border-color: var(--ok); color: var(--ok); }
.chip-sala--descartado { color: var(--tinta-suave); }
.fila--atencion td:first-child { box-shadow: inset 4px 0 0 var(--marino-2); }
.vincular td { white-space: normal; vertical-align: top; }
.vincular__opcion { display: flex; gap: 0.35rem; align-items: flex-start; cursor: pointer; }
.vincular__opcion input { width: 18px; height: 18px; margin-top: 2px; }
.autorizacion { margin-top: 1rem; padding: 0.75rem 1rem; border: 1.5px solid var(--linea); border-left: 4px solid var(--naranja); border-radius: var(--radio); display: grid; gap: 0.5rem; }
.autorizacion legend { font-weight: 700; padding: 0 0.25rem; }
.autorizacion__check { display: flex; gap: 0.5rem; align-items: center; cursor: pointer; font-weight: 600; }
.autorizacion__check input { width: 20px; height: 20px; }
.autorizacion__detalle { display: grid; gap: 0.35rem; }
.autorizacion__detalle label:not(.autorizacion__check) { font-size: var(--t-chico); font-weight: 600; color: var(--tinta-suave); }

/* ── E2b: fórmulas (ficha, formulario, vista) y optómetras ──────────── */
.formula-fila { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.6rem 0; border-top: 1px solid var(--linea); }
.formula-fila:last-of-type { border-bottom: 1px solid var(--linea); }
.formula-fila__texto { display: grid; gap: 0.15rem; min-width: 0; }
.formula-fila__texto span { font-variant-numeric: tabular-nums; }
.formula-fila__texto small { color: var(--tinta-suave); font-size: var(--t-chico); }
.ficha__seccion + .ficha__seccion > .btn--primario { margin-top: 0.75rem; }
.formula-form .form-grid, .rx__ojo { align-items: start; }   /* una ayuda larga no estira los vecinos */
.rx { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 0.75rem; }
.rx__ojo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 0.75rem; padding: 0.75rem; border: 1.5px solid var(--linea); border-radius: var(--radio); }
.rx__titulo { grid-column: 1 / -1; font-size: var(--t-base); color: var(--marino); }
.campo--error input, .campo--error select, .campo--error textarea { border-color: var(--error); }
.campo__error { color: var(--error); font-weight: 600; font-size: var(--t-chico); }
.formula-vista .datos dd { font-variant-numeric: tabular-nums; }
.lista-simple { list-style: none; margin: 0; padding: 0; }
.lista-simple__fila { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.5rem 0; border-top: 1px solid var(--linea); }
.panel__form { margin: 0.5rem 0 0.75rem; padding: 0.75rem; background: var(--fondo); border-radius: var(--radio); }

/* Hoja de la fórmula (solo al imprimir; carta, un paciente por hoja). */
.hoja-formula { display: none; }
@media print {
  body.imprimiendo #hoja-impresion.hoja-formula { text-align: left; font-size: 11pt; }
  .fi { max-width: 18cm; margin: 0 auto; color: #000; }
  .fi-cab { display: flex; align-items: center; gap: 0.6cm; border-bottom: 3px solid #f39c12; padding-bottom: 0.35cm; margin-bottom: 0.45cm; }
  .fi-logo { width: 2.6cm; height: auto; }
  .fi-titulo h1 { font-size: 20pt; color: #001f3f; margin: 0; }
  .fi-titulo p { font-size: 11pt; letter-spacing: 0.06em; color: #003d66; margin: 0.1cm 0 0; }
  .fi-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 0.15cm 0.8cm; margin-bottom: 0.45cm; }
  .fi-datos p { margin: 0; }
  .fi-sub { font-size: 13pt; color: #001f3f; margin: 0.2cm 0; }
  .fi-tabla { width: 100%; border-collapse: collapse; margin-bottom: 0.45cm; font-variant-numeric: tabular-nums; }
  .fi-tabla th, .fi-tabla td { border: 1px solid #555; padding: 0.15cm 0.25cm; text-align: center; }
  .fi-tabla th { background: #e8eef5; }
  .fi-tabla td:first-child { text-align: left; font-weight: 700; }
  .fi-sin { font-size: 14pt; font-weight: 700; border: 2px solid #001f3f; padding: 0.3cm; text-align: center; margin: 0.3cm 0 0.45cm; }
  .fi-dx p { margin: 0 0 0.15cm; }
  .fi-et { font-weight: 700; color: #001f3f; margin-top: 0.25cm !important; }
  .fi-firmas { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2cm; margin-top: 1.6cm; }
  .fi-firmas p { margin: 0; }
  .fi-linea { border-top: 1px solid #000; padding-top: 0.1cm; font-weight: 700; }
  .fi-pie { margin-top: 1cm; border-top: 1px solid #999; padding-top: 0.2cm; text-align: center; font-size: 9pt; color: #333; }
  .fi-pie p { margin: 0; }
  .fi-reemplaza { margin-top: 0.4cm; font-size: 9pt; font-style: italic; color: #333; }
}

/* E2b (28 sep 2026): formulario rápido (A1/B1/C1) */
.form-grid--4 { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.rx__ojo input { font-variant-numeric: tabular-nums; }
.aviso-autorizacion { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; padding: 0.5rem 0.75rem; margin-bottom: 0.75rem; border-left: 4px solid var(--alerta, #b7791f); background: var(--fondo); border-radius: var(--radio); font-size: var(--t-chico); }
.aviso-autorizacion > div { flex-basis: 100%; }
/* Una fila por ojo, como en OKO (Esfera · Cilindro · Eje · ADD · DP); los errores no estiran la otra fila. */
.formula-form .rx { grid-template-columns: 1fr; align-items: start; }
.formula-form .rx__ojo { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); align-content: start; }
.formula-form input::placeholder { color: #a8b0bb; }
/* 28 sep 2026: jornada y optómetra ya resueltos, en una línea con "Cambiar" */
.resueltos { display: grid; gap: 0.35rem; margin-bottom: 0.75rem; }
.resuelto { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; margin: 0; padding: 0.5rem 0.75rem; background: var(--fondo); border-radius: var(--radio); }
.resuelto small { color: var(--tinta-suave); }
.resuelto .btn--texto { margin-left: auto; }

/* E2c: corregir y anular fórmulas */
.btn--peligro { background: #fff; border-color: var(--error); color: var(--error); }
.btn--peligro:hover:not(:disabled) { background: #fde7e5; }
.btn--peligro:disabled { cursor: not-allowed; }
.sello { padding: 0.5rem 0.75rem; border-radius: var(--radio-chico); font-size: var(--t-chico); margin-bottom: 0.5rem; border-left: 4px solid; }
.sello--anulada { background: #fde7e5; color: #7a1a13; border-color: var(--error); }
.sello--corregida { background: #fff3dc; color: #6b4500; border-color: #b7791f; }
.formula-fila--anulada .formula-fila__texto, .formula-fila--corregida .formula-fila__texto { opacity: 0.7; }
.formula-fila--anulada strong { text-decoration: line-through; }

/* Fase A — carga por consulta: búsqueda en la nube, nota de historial y ajuste de ventana */
.buscar-nube { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.ficha__historial { margin: .25rem 0 .75rem; }
.ajuste-ventana { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .75rem; }
.ajuste-ventana input { width: 5rem; }
.ajuste-ventana .nota, .ajuste-ventana .txt-error { flex-basis: 100%; margin: 0; }

/* ── E3: Catálogo ─────────────────────────────────────────────── */
.catalogo__grupo { margin-bottom: 1.5rem; }
.catalogo__grupo-titulo { font-size: 1.05rem; margin: 1rem 0 0.5rem; }
.catalogo__gama { margin-bottom: 1rem; }
.catalogo__gama-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; }
.catalogo__gama-cab h3 { margin: 0; font-size: 1rem; }
.chip--ok { background: #d8f0e0; color: #0d4a26; }
.chip--neutro { background: #e6e9ef; color: #2c3440; }
.check { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }

/* ── E4: Cotizaciones ─────────────────────────────────────────────── */
.cot__paciente { font-weight: 600; margin: 0 0 0.5rem; }
.cot__agregar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.5rem 0; }
.cot__agregar select, .cot__agregar input { flex: 1 1 12rem; min-width: 0; }
.cot__especial { margin: 0.5rem 0; }
.cot__especial > input, .cot__especial > select { display: block; width: 100%; margin: 0.35rem 0; }
.cot__items { margin: 0.75rem 0; }
.cot__item { display: flex; gap: 0.75rem; align-items: center; padding: 0.4rem 0; border-bottom: 1px solid var(--linea); }
.cot__item-nombre { flex: 1; }
.cot__totales { margin-top: 0.5rem; }
.cot__total { font-size: var(--t-base); font-weight: 600; margin: 0.15rem 0; }
.cot__total--descuento { color: var(--verde, #1d7a46); }
.cot__texto { width: 100%; font-family: inherit; }
.ajustes-venta { margin-bottom: 1rem; }
.ajustes-venta__medios { display: flex; flex-wrap: wrap; gap: 0.75rem; border: 0; padding: 0; margin: 0.5rem 0; }
.cot__obsequio { margin: 0.4rem 0; font-weight: 600; }

/* E4c (v34): subpestañas de Órdenes, envío/recepción en lote y panel de laboratorios */
.ord-subs { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; margin-bottom: 0.75rem; border-bottom: 1px solid var(--borde, #d9dee5); }
.ord-sub { padding: 0.5rem 0.25rem; border-radius: 0; }
.ord-sub--activa { font-weight: 700; border-bottom: 3px solid var(--naranja, #e8a33d); }
.ord-lote { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.ord-lote p { flex-basis: 100%; margin: 0; }
.ord-lote-barra { margin-bottom: 0.5rem; }
.ord-marcar { width: 1.4rem; height: 1.4rem; }            /* casillas grandes: se tocan con el dedo */
.ord-paso-lab { margin: 0.4rem 0; }
.ord-cobrar { align-items: center; }
.laboratorios { margin-bottom: 1rem; }
.lab__fila { align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.lab__acciones { display: flex; gap: 0.25rem; }

/* ── E5a: Nómina (por empresa), Por cobrar y hoja de laboratorio impresa ── */
.nom-empresa { margin: 1rem 0 1.5rem; padding-top: 0.75rem; border-top: 2px solid var(--linea); }
.nom-empresa__titulo { font-size: var(--t-grande, 1.2rem); color: var(--marino); margin: 0 0 0.5rem; }
.nom-bloque { margin: 0.5rem 0 1rem; padding-left: 0.75rem; border-left: 4px solid var(--linea); }
.nom-bloque--reportar { border-left-color: var(--naranja); }
.nom-bloque--responder { border-left-color: var(--marino-2); }
.nom-bloque__titulo { font-size: var(--t-base); margin: 0 0 0.4rem; font-variant-numeric: tabular-nums; }
.nom-barra { flex-wrap: wrap; }
.nom-confirmar p { margin: 0 0 0.5rem; }
.cobrar-tel { font-variant-numeric: tabular-nums; white-space: nowrap; }
.hoja-lab { display: none; }
/* v37: 4 órdenes de laboratorio por hoja carta (2×2), con línea de corte punteada; la individual también va en un cuarto. */
@media print {
  .fl-hoja { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; width: 19.1cm; height: 25.4cm;
    margin: 0 auto; text-align: left; break-after: page; page-break-after: always; }
  .fl-hoja:last-child { break-after: auto; page-break-after: auto; }
  .fl-cuarto { border: 1px dashed #777; padding: 0.35cm 0.4cm; overflow: hidden; font-size: 8.5pt; line-height: 1.3; color: #000; }
  .fl-cuarto p { margin: 0 0 0.12cm; }
  .fl-cuarto--vacio { border-color: #ddd; }
  .fl-cab { display: flex; align-items: center; gap: 0.3cm; margin-bottom: 0.2cm; border-bottom: 1px solid #001f3f; padding-bottom: 0.15cm; }
  .fl-logo { width: 1.5cm; height: auto; }
  .fl-titulo { font-weight: 800; color: #001f3f; margin: 0; text-transform: uppercase; letter-spacing: 0.04em; }
  .fl-ov { font-size: 12pt; font-weight: 800; margin: 0; }
  .fl-cuarto .fi-tabla { margin-bottom: 0.2cm; font-size: 8pt; }
  .fl-cuarto .fi-tabla th, .fl-cuarto .fi-tabla td { padding: 0.06cm 0.12cm; }
}

/* v37: filtro por fecha de la orden */
.ord-fechas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; width: 100%; }
.ord-fechas__et { font-size: var(--t-chico, 0.85rem); color: var(--texto-2, #555); }
.ord-fechas input[type="date"] { min-height: 2.5rem; }

/* E5b — Cartera */
.car-cobro--vencido td:last-child { color: var(--error); font-weight: 700; }
.car-cobro--pagado td:last-child, .car-cobro--anulado td:last-child { color: var(--texto-2, #555); }
.car-porcobrar { border-left-color: var(--naranja); }
.car-detalle { margin-top: 1rem; padding: 0.75rem; border: 1px solid var(--linea); border-radius: 8px; }
.car-detalle input[type="date"], .car-mes { min-height: 2.5rem; }

/* E6 — Inconformidades (pantalla Órdenes): formularios de las salidas, caja de la abierta, historia y etiqueta "Rehacer". */
.inc-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.5rem 0; }
.inc-form > p { flex: 1 1 100%; margin: 0; }
.inc-form select, .inc-form input { flex: 1 1 12rem; min-width: 0; }
.inc-form textarea { flex: 1 1 100%; min-height: 3.2rem; }
.inc-abierta p { margin: 0.25rem 0; }
.inc-reporte-texto { font-weight: 600; }
.inc-historia__fila { margin: 0.25rem 0; }
.ord-chip-rehacer, .ord-chip-inc { white-space: nowrap; }
.fl-rehacer { font-weight: 700; }
/* v42: el laboratorio siempre a la vista (detalle, inconformidad y formulario de Rehacer). */
.ord-laboratorio, .ord-laboratorio-rehacer, .inc-lab-anterior { font-weight: 600; }
.inc-form > p.inc-lab-anterior { margin-top: 0.25rem; }

/* v46: devolución del dinero. */
.inc-devolucion-detalle { margin: 0.5rem 0; }
.inc-devolucion-gafas { display: flex; align-items: center; gap: 0.4rem; margin: 0.5rem 0; }

/* v47: pantalla Calidad (E6 T4) — rango, tarjetas de resumen y tablas de métricas. */
.pantalla__sub { color: var(--tinta-suave, #555); margin: 0.25rem 0 0; font-size: var(--t-chico); }
.cal-filtro { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.75rem 0; }
.cal-filtro__et { font-weight: 600; }
.cal-filtro input[type="date"] { min-height: 2.5rem; }
.cal-tarjetas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0.5rem 0 1rem; }
.cal-tarjeta { flex: 1 1 10rem; min-width: 9rem; border: 1px solid var(--linea); border-radius: 10px; padding: 0.75rem; background: #fafcff; }
.cal-tarjeta--alerta { border-left: 4px solid var(--naranja, #e07b00); }
.cal-tarjeta__valor { font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
.cal-tarjeta__et { color: var(--tinta-suave, #555); font-size: var(--t-chico); margin-top: 0.2rem; }
.cal-bloque { margin: 1rem 0; }
.cal-bloque__titulo { font-size: 1.05rem; margin: 0 0 0.4rem; }
.cal-tabla { max-width: 32rem; }
.cal-pie { margin-top: 1rem; }

/* v51: subpestaña Comisiones (E7 T3, solo socios). */
.com-filtro select, .com-filtro input[type="date"] { min-height: 2.5rem; }
.com-jornada { border: 1px solid var(--linea); border-radius: 10px; padding: 0.6rem 0.75rem; margin: 0.6rem 0; }
.com-jornada--sinregla { border-left: 4px solid var(--naranja, #e07b00); }
.com-jornada__titulo { font-size: 1rem; margin: 0 0 0.4rem; }
.com-subtotal { font-weight: 700; margin: 0.4rem 0 0; }
.com-tabla { max-width: 48rem; }
.com-tabla--reglas { max-width: none; }
.com-tabla select, .com-tabla input { min-height: 2.25rem; max-width: 12rem; }
.com-descuento td { color: var(--rojo, #b00020); }
.com-fijo td { font-style: italic; }
.com-sin td:first-child { font-weight: 700; }
.com-acciones { display: inline-flex; gap: 0.25rem; flex-wrap: wrap; }

/* v52: Por facturar (E7 T4) y paz y salvo. */
.vc-factura-form .cal-filtro input[type="text"] { min-height: 2.5rem; max-width: 14rem; }
.ficha-pys { margin-top: 0.5rem; }
.ficha-pys__aviso p { margin: 0.25rem 0; }
/* E8 T1: marca de deuda del sistema anterior en la ficha del paciente. */
.ficha-deuda { font-weight: 600; margin: 0.25rem 0; }
.ficha-deuda-accion { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.25rem 0 0.5rem; }
.ficha-deuda-nota { min-height: 2.5rem; max-width: 18rem; flex: 1 1 12rem; }
@media print {
  .pys .pys-fecha { margin: 0.6cm 0 0.8cm; }
  .pys .pys-a { font-weight: 700; letter-spacing: 0.04em; margin: 0 0 0.6cm; }
  .pys .pys-texto { font-size: 12pt; line-height: 1.6; text-align: justify; margin: 0 0 0.4cm; }
  .pys .pys-firmas { grid-template-columns: 1fr; max-width: 8cm; margin-top: 2.4cm; }
}
.vc-filtro-empresa { display: inline-flex; align-items: center; gap: 0.5rem; }
.vc-filtro-empresa select { min-height: 2.5rem; max-width: 16rem; }

/* v54: filtros activos a la vista y detalle de la orden dentro de Ventas y caja. */
.vc-atajo--activo { font-weight: 700; background: var(--fondo); border-radius: var(--radio); }
.vc-activos { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0 0 0.5rem; font-size: var(--t-chico); }
.vc-activos__et { color: var(--tinta-suave, #555); }
.vc-activos__nota { color: var(--tinta-suave, #555); }
.vc-chip { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.15rem 0.6rem; border: 1px solid var(--linea); border-radius: 999px; background: #fafcff; font-weight: 600; }
.vc-chip__x { padding: 0 0.3rem; min-height: 0; line-height: 1; }
.vc-detalle__datos { margin-bottom: 0.5rem; }
.vc-detalle__items { max-width: none; margin-bottom: 0.5rem; }
.vc-detalle__total td { font-weight: 700; }
.vc-detalle__pagos h3 { font-size: 1rem; margin: 0.5rem 0 0.25rem; }
.vc-detalle__saldo { font-weight: 700; margin: 0.25rem 0 0; }