* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
  background-color: #f1f5f9;
  color: #1e293b;
}

/* ENCABEZADO */
.panel-header {
  background: #0b3c5d;
  color: #ffffff;
  padding: 16px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.panel-header h1 {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}

.panel-header .subtitulo {
  font-size: 12px;
  color: #93c5fd;
  display: block;
  margin-top: 2px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.user-name {
  font-size: 14px;
  font-weight: 600;
  color: #f8fafc;
}

.btn-logout {
  background: #ef4444;
  color: #ffffff;
  border: none;
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  font-size: 13px;
  transition: background 0.2s;
}

.btn-logout:hover {
  background: #dc2626;
}

/* TABS DE NAVEGACIÓN */
.tabs-nav {
  background: #e2e8f0;
  padding: 10px 32px 0 32px;
  display: flex;
  gap: 8px;
  border-bottom: 2px solid #cbd5e1;
}

.tab-btn {
  background: transparent;
  border: none;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
}

.tab-btn:hover {
  background: #cbd5e1;
}

.tab-btn.active {
  background: #0b3c5d;
  color: #ffffff;
}

/* CONTENEDOR PRINCIPAL */
.panel-container {
  max-width: 1200px;
  margin: 24px auto;
  padding: 0 20px;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* TARJETAS CONTENEDORAS */
.card-box {
  background: #ffffff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.card-header-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.card-header-flex h2 {
  font-size: 18px;
  color: #0b3c5d;
  font-weight: 700;
}

/* BOTONES DE ACCIÓN */
.btn-primary-sm {
  background: #f8fafc;
  color: #0b3c5d;
  border: 1px solid #cbd5e1;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}

.btn-primary-sm:hover {
  background: #e2e8f0;
}

.btn-confirmar-accion {
  background: #16a34a;
  color: white;
  border: none;
  padding: 5px 10px;
  font-size: 11px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
}

.btn-confirmar-accion:hover {
  background: #15803d;
}

.btn-secondary {
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
}

/* TABLA DE CITAS */
.table-responsive {
  overflow-x: auto;
}

.tabla-clinica {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.tabla-clinica th {
  background: #f8fafc;
  padding: 12px 14px;
  font-size: 13px;
  color: #475569;
  border-bottom: 2px solid #e2e8f0;
}

.tabla-clinica td {
  padding: 12px 14px;
  font-size: 13px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}

/* BADGES DE ESTADO */
.badge-estado {
  display: inline-block;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 12px;
}

.badge-pendiente { background: #fef3c7; color: #b45309; }
.badge-confirmada { background: #dcfce7; color: #15803d; }
.badge-completada { background: #e0f2fe; color: #0369a1; }
.badge-cancelada { background: #fee2e2; color: #b91c1c; }

/* CLASES DE VISIBILIDAD */
.hidden {
  display: none !important;
}

.text-muted {
  color: #64748b;
  font-size: 12px;
}

.text-center {
  text-align: center;
}

/* EXPEDIENTE Y NOTAS SOAP */
.selector-paciente-box select {
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid #cbd5e1;
}

.paciente-resumen-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 20px;
}

.grid-resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  font-size: 13px;
}

.form-nota-card {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 20px;
  margin-top: 20px;
}

.soap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.soap-grid textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  resize: vertical;
}

.btn-primary {
  background: #0b3c5d;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
}

.btn-cancelar {
  background: #e2e8f0;
  border: none;
  padding: 8px 14px;
  border-radius: 4px;
  cursor: pointer;
}
/* ===== Acceso de terapeutas y sello de integridad (corrección V3) ===== */
.hidden { display: none !important; }
.login-pantalla { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #f1f5f9; padding: 16px; }
.login-card { background: #fff; width: 100%; max-width: 360px; padding: 28px; border-radius: 10px; box-shadow: 0 4px 18px rgba(0,0,0,0.08); display: flex; flex-direction: column; gap: 8px; }
.login-card h2 { margin: 0; color: #0b3c5d; }
.login-card input { padding: 9px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 14px; }
.login-card .btn-primary { margin-top: 10px; }
.login-error-panel { color: #dc2626; font-size: 13px; margin: 4px 0 0; }
.badge-integridad { font-size: 11px; padding: 2px 8px; border-radius: 10px; margin-left: 8px; vertical-align: middle; }
.badge-integridad.ok { background: #dcfce7; color: #166534; }
.badge-integridad.mal { background: #fee2e2; color: #991b1b; }
.nota-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 14px; margin-bottom: 12px; }
.nota-card p { margin: 4px 0; font-size: 13px; line-height: 1.5; white-space: pre-wrap; }
.nota-encabezado { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.nota-sello { display: block; margin-top: 8px; color: #16a34a; font-family: monospace; font-size: 11px; word-break: break-all; }
.acciones-cita { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.btn-mini { padding: 4px 8px; font-size: 11px; border-radius: 4px; cursor: pointer; border: 1px solid #cbd5e1; background: #f8fafc; }
.btn-mini.oscuro { background: #0b3c5d; color: #fff; border-color: #0b3c5d; }
.btn-mini.gris { background: #475569; color: #fff; border-color: #475569; }
.btn-mini.peligro { background: #fee2e2; color: #dc2626; border-color: #fecaca; }

/* ===== Varios terapeutas (V4) ===== */
.header-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.badge-rol { background: #fde68a; color: #78350f; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 10px; }
.btn-header-sec { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.5); border-radius: 4px; padding: 6px 10px; font-size: 12px; cursor: pointer; }
.selector-paciente-box { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-bottom: 10px; }
.grid-form label, .modal-caja label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: #334155; }
.grid-form input, .grid-form select, .modal-caja input { padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 14px; font-weight: 400; }
.check-linea { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; margin: 6px 0; }
.fila-botones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.form-nota-card { margin-bottom: 16px; }
.modal-fondo { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal-fondo.hidden { display: none !important; }
.modal-caja { background: #fff; border-radius: 8px; width: 100%; max-width: 400px; padding: 22px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 4px 16px rgba(0,0,0,0.25); }
.modal-caja h3 { margin: 0; color: #0b3c5d; }
.pt-clave { font-family: monospace; font-size: 22px; letter-spacing: 1px; background: #f1f5f9; padding: 10px; border-radius: 6px; text-align: center; user-select: all; margin: 0; }
.sin-asignar { background: #fffbeb; }
.select-asignar { padding: 4px; font-size: 12px; border: 1px solid #f59e0b; border-radius: 4px; max-width: 160px; }

/* ===== Supervisión (V5) ===== */
.aviso-supervision { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a; padding: 10px 12px; border-radius: 6px; font-size: 13px; margin: 14px 0 0; }
.adenda { margin-top: 10px; padding: 10px 12px; border-left: 4px solid #94a3b8; background: #fff; border-radius: 4px; }
.adenda.supervision { border-left-color: #2563eb; background: #eff6ff; }
.adenda-titulo { font-size: 12px; font-weight: 700; color: #334155; }
.adenda.supervision .adenda-titulo { color: #1e40af; }
.form-adenda { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.form-adenda textarea { width: 100%; padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px; font-family: inherit; font-size: 13px; box-sizing: border-box; }
.btn-adenda { margin-top: 8px; }

/* ===== Mi semana y reportes (V6) ===== */
.badge-no_asistio { background: #fee2e2; color: #991b1b; }
.semana-barra { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.semana-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.semana-nav strong { color: #0b3c5d; font-size: 16px; margin-left: 6px; }
.semana-nav select { padding: 5px; border: 1px solid #cbd5e1; border-radius: 4px; }
.semana-ayuda { font-size: 12px; margin: 10px 0 6px; }
.semana-leyenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: #475569; margin-bottom: 10px; }
.ley { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: 4px; }
.ley-trabajo { background: #ecfdf5; border: 1px solid #a7f3d0; }
.ley-confirmada, .cita-confirmada { background: #0b3c5d; }
.ley-pendiente, .cita-pendiente { background: #d97706; }
.ley-completada, .cita-completada { background: #16a34a; }
.ley-no_asistio, .cita-no_asistio { background: #dc2626; }
.ley-cancelada, .cita-cancelada { background: #94a3b8; }
.semana-scroll { overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 6px; }
.semana-grid { display: grid; grid-template-columns: 56px repeat(7, minmax(110px, 1fr)); min-width: 836px; background: #fff; }
.sg-cab { position: sticky; top: 0; background: #f8fafc; border-bottom: 1px solid #e2e8f0; padding: 8px 4px; text-align: center; font-size: 12px; font-weight: 700; color: #334155; z-index: 2; }
.sg-cab.hoy { color: #fff; background: #0b3c5d; }
.sg-horas { position: relative; border-right: 1px solid #e2e8f0; }
.sg-hora { position: absolute; right: 6px; font-size: 11px; color: #64748b; transform: translateY(-6px); }
.sg-dia { position: relative; border-right: 1px solid #f1f5f9; cursor: pointer; background-image: linear-gradient(#f1f5f9 1px, transparent 1px); background-size: 100% 48px; }
.sg-trabajo { position: absolute; left: 0; right: 0; background: #ecfdf5; border-top: 1px dashed #a7f3d0; border-bottom: 1px dashed #a7f3d0; pointer-events: none; }
.sg-cita { position: absolute; left: 3px; right: 3px; border-radius: 5px; color: #fff; font-size: 11px; padding: 3px 5px; overflow: hidden; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.2); z-index: 1; line-height: 1.25; }
.sg-cita.cita-cancelada { text-decoration: line-through; opacity: 0.75; }
.sg-cita strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-ahora { position: absolute; left: 0; right: 0; border-top: 2px solid #dc2626; z-index: 1; pointer-events: none; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.modal-caja select { padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 14px; font-weight: 400; }
.modal-ancha { max-width: 560px; max-height: 90vh; overflow-y: auto; }
.dc-grupo { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.dc-etiqueta { font-size: 13px; font-weight: 700; color: #334155; }
.btn-asistio { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.hor-dia { border-bottom: 1px solid #f1f5f9; padding: 8px 0; display: flex; gap: 10px; align-items: flex-start; }
.hor-dia > strong { width: 82px; flex-shrink: 0; font-size: 13px; padding-top: 6px; color: #0b3c5d; }
.hor-bloques { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.hor-bloque { display: flex; gap: 6px; align-items: center; font-size: 12px; }
.hor-bloque input { padding: 5px; border: 1px solid #cbd5e1; border-radius: 4px; }
.hor-vacio { font-size: 12px; color: #94a3b8; padding-top: 6px; }
.reporte-periodo { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 10px 0; font-size: 13px; }
.reporte-periodo input { padding: 5px; border: 1px solid #cbd5e1; border-radius: 4px; }
.reporte-periodo .btn-mini.activo { background: #0b3c5d; color: #fff; border-color: #0b3c5d; }
.tabla-reporte td, .tabla-reporte th { text-align: center; }
.tabla-reporte td:first-child, .tabla-reporte th:first-child { text-align: left; }
.tabla-reporte tbody tr.clicable { cursor: pointer; }
.tabla-reporte tbody tr.clicable:hover, .tabla-reporte tbody tr.seleccionada { background: #eff6ff; }
.num-alerta { color: #dc2626; font-weight: 700; }

/* ===== Asistente de IA (V7) ===== */
.ia-boton { position: fixed; right: 20px; bottom: 20px; z-index: 900; background: #0b3c5d; color: #fff; border: none; border-radius: 24px; padding: 12px 18px; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.25); }
.ia-boton.hidden, .ia-panel.hidden { display: none !important; }
.ia-panel { position: fixed; right: 0; top: 0; bottom: 0; width: 440px; max-width: 100vw; background: #fff; z-index: 950; display: flex; flex-direction: column; box-shadow: -4px 0 18px rgba(0,0,0,0.18); }
.ia-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 14px; background: #0b3c5d; color: #fff; }
.ia-cabecera small { display: block; font-size: 11px; color: #bfdbfe; }
.ia-cabecera > div:last-child { display: flex; gap: 6px; }
.ia-aviso { margin: 0; padding: 8px 14px; font-size: 11px; background: #fffbeb; color: #78350f; border-bottom: 1px solid #fde68a; }
.ia-expediente { display: flex; gap: 8px; align-items: flex-start; padding: 8px 14px; font-size: 12px; border-bottom: 1px solid #e2e8f0; color: #334155; }
.ia-expediente input:disabled + span { color: #94a3b8; }
.ia-mensajes { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; background: #f8fafc; }
.ia-msg { max-width: 92%; padding: 9px 11px; border-radius: 8px; font-size: 13px; line-height: 1.5; word-wrap: break-word; }
.ia-msg.usuario { align-self: flex-end; background: #0b3c5d; color: #fff; white-space: pre-wrap; }
.ia-msg.asistente { align-self: flex-start; background: #fff; border: 1px solid #e2e8f0; color: #1e293b; }
.ia-msg.asistente p { margin: 0 0 6px; }
.ia-msg.asistente ul { margin: 4px 0 6px; padding-left: 18px; }
.ia-msg.error { align-self: center; background: #fee2e2; color: #991b1b; font-size: 12px; }
.ia-meta { display: block; font-size: 10px; color: #64748b; margin-top: 4px; }
.ia-sugerencias { display: flex; flex-wrap: wrap; gap: 6px; }
.ia-sugerencias p { width: 100%; margin: 0; font-size: 12px; }
.ia-form { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid #e2e8f0; align-items: flex-end; }
.ia-form textarea { flex: 1; resize: none; padding: 8px; border: 1px solid #cbd5e1; border-radius: 6px; font-family: inherit; font-size: 13px; }
.ia-escribiendo { align-self: flex-start; font-size: 12px; color: #64748b; font-style: italic; }

/* ===== Biblioteca (V8) ===== */
.vd-texto { max-height: 60vh; overflow-y: auto; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 12px; font-size: 13px; line-height: 1.55; white-space: pre-wrap; }
.vd-texto hr { border: none; border-top: 1px dashed #cbd5e1; margin: 10px 0; }

/* ===== Baja de pacientes (V9) ===== */
.check-archivados { font-size: 12px; display: flex; align-items: center; gap: 4px; color: #475569; }
.acciones-paciente { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.aviso-baja { margin: 10px 0 0; padding: 8px 10px; background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 13px; color: #334155; }

/* ===== App instalable y celular (V10) ===== */
.pasos-ios { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.7; }
.btn-header-sec.hidden { display: none !important; }

/* Modo app (instalada): respeta la barra de estado y la muesca del iPhone */
@media (display-mode: standalone) {
  .panel-header { padding-top: calc(12px + env(safe-area-inset-top)); }
}

@media (max-width: 760px) {
  .panel-header { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 16px; padding-top: calc(12px + env(safe-area-inset-top)); }
  .panel-header h1 { font-size: 17px; }
  .header-right { flex-wrap: wrap; gap: 8px; width: 100%; }
  .user-name { width: 100%; }
  .btn-header-sec, .btn-logout { padding: 6px 10px; font-size: 12px; }

  /* Pestañas: una fila que se desliza con el dedo */
  .tabs-nav { overflow-x: auto; flex-wrap: nowrap; padding: 8px 12px 0; gap: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabs-nav::-webkit-scrollbar { display: none; }
  .tab-btn { flex-shrink: 0; padding: 9px 12px; font-size: 13px; white-space: nowrap; }

  .panel-container { margin: 12px auto; padding: 0 10px calc(80px + env(safe-area-inset-bottom)); }
  .card-box { padding: 14px; }
  .card-header-flex { flex-wrap: wrap; gap: 10px; align-items: flex-start; }
  .card-header-flex h2 { font-size: 16px; }
  .selector-paciente-box { width: 100%; }
  .selector-paciente-box select { width: 100%; max-width: 100%; }
  .grid-resumen, .soap-grid, .grid-2, .grid-form { grid-template-columns: 1fr; }

  /* Tablas: más compactas y con desplazamiento horizontal */
  .tabla-clinica th, .tabla-clinica td { padding: 8px 6px; font-size: 12px; }
  .table-responsive { -webkit-overflow-scrolling: touch; }

  /* Agenda semanal: columnas más angostas, se desliza a los lados */
  .semana-grid { grid-template-columns: 44px repeat(7, 96px); min-width: 716px; }
  .semana-barra { flex-direction: column; align-items: stretch; }
  .semana-leyenda { gap: 8px; font-size: 11px; }

  .reporte-periodo label { flex: 1 1 140px; }
  .modal-caja { max-height: 90vh; overflow-y: auto; padding: 18px; }

  /* Asistente: botón más chico y panel a pantalla completa */
  .ia-boton { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); padding: 10px 14px; font-size: 13px; }
  .ia-panel { width: 100vw; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }

  /* Evita que iPhone haga zoom al escribir (necesita 16px) */
  input, select, textarea { font-size: 16px !important; }
}

/* ===== Modo sin conexión (V11) ===== */
#pantalla-offline { min-height: 100vh; background: #f1f5f9; }
.off-cabecera { background: #334155; color: #fff; padding: 12px 16px; padding-top: calc(12px + env(safe-area-inset-top)); display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.off-cabecera small { display: block; font-size: 12px; color: #cbd5e1; margin-top: 2px; }
.off-cabecera-botones { display: flex; gap: 6px; flex-wrap: wrap; }
.off-volvio { background: #dcfce7; color: #14532d; padding: 10px 16px; font-size: 13px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.off-volvio.sin { background: #fef3c7; color: #78350f; }
.off-volvio.hidden { display: none !important; }
.off-desbloqueo { display: flex; justify-content: center; padding: 40px 16px; }
.off-desbloqueo .login-card input { font-size: 18px; letter-spacing: 3px; text-align: center; }
.off-tabs { background: #e2e8f0; }
.off-burbuja { background: #dc2626; color: #fff; border-radius: 10px; padding: 0 7px; font-size: 11px; margin-left: 4px; }
.off-dia { margin: 14px 0 6px; font-size: 13px; font-weight: 700; color: #0b3c5d; }
.off-dia::first-letter { text-transform: uppercase; }
.off-dia.hoy::after { content: ' · HOY'; color: #dc2626; }
.off-cita, .off-tarjeta { background: #fff; border: 1px solid #e2e8f0; border-left: 4px solid #0b3c5d; border-radius: 6px; padding: 10px 12px; margin-bottom: 8px; }
.off-cita.estado-completada { border-left-color: #16a34a; }
.off-cita.estado-no_asistio { border-left-color: #dc2626; }
.off-cita.estado-cancelada { border-left-color: #94a3b8; opacity: 0.7; }
.off-cita.estado-pendiente { border-left-color: #d97706; }
.off-cita-linea { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.off-acciones { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.off-acciones .btn-mini { padding: 7px 10px; font-size: 12px; }
.off-pend { display: inline-block; background: #fef3c7; color: #92400e; font-size: 11px; border-radius: 8px; padding: 1px 7px; margin-left: 6px; }
.off-error { background: #fee2e2; color: #991b1b; }
.off-ok { background: #dcfce7; color: #166534; }
.off-nota p { margin: 3px 0; font-size: 13px; white-space: pre-wrap; }
.off-seccion.hidden { display: none; }
.mo-lista { font-size: 12px; margin: 0 0 6px; padding-left: 18px; color: #475569; line-height: 1.5; }
#modal-offline .modal-caja, #modal-pin-online .modal-caja { max-width: 440px; }
#pantalla-offline.hidden { display: none !important; }

/* ===== Portal de pacientes, lado clínica (V12) ===== */
.portal-paciente { margin-top: 18px; border: 1px solid #ccebe6; background: #f4fbfa; border-radius: 8px; padding: 14px; }
.portal-paciente h3 { color: #0f766e; margin: 0 0 8px; font-size: 16px; }
.portal-paciente h4 { color: #0b3c5d; margin: 14px 0 6px; font-size: 14px; }
.pp-fila { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 13px; }
.pp-enlace { width: 100%; font-family: monospace; font-size: 12px; padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px; background: #fff; }
.pp-tabla { width: 100%; border-collapse: collapse; font-size: 13px; background: #fff; }
.pp-tabla th, .pp-tabla td { border-bottom: 1px solid #e2e8f0; padding: 6px 8px; text-align: left; }
.pp-chat { max-height: 320px; overflow-y: auto; background: #efeae2; border-radius: 6px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.pp-msg { max-width: 85%; padding: 6px 9px; border-radius: 6px; font-size: 13px; white-space: pre-wrap; }
.pp-msg.paciente { align-self: flex-end; background: #d9fdd3; }
.pp-msg.guia { align-self: flex-start; background: #fff; border-left: 3px solid #14a394; }
.pp-msg.riesgo { outline: 2px solid #dc2626; }
.pp-msg small { display: block; font-size: 10px; color: #64748b; margin-top: 2px; }
.pp-alerta { background: #fee2e2; color: #991b1b; border-radius: 6px; padding: 10px; font-size: 13px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.ficha-detalle { font-size: 13px; line-height: 1.5; }
.ficha-detalle h4 { color: #0f766e; margin: 12px 0 4px; font-size: 14px; border-bottom: 1px solid #e2e8f0; padding-bottom: 2px; }
.ficha-detalle dl { display: grid; grid-template-columns: 170px 1fr; gap: 3px 10px; }
.ficha-detalle dt { color: #64748b; }
.ficha-detalle dd { white-space: pre-wrap; }
@media (max-width: 600px) { .ficha-detalle dl { grid-template-columns: 1fr; } .ficha-detalle dd { margin-bottom: 6px; } }
.riesgo-fila { background: #fff1f1; }

/* ===== Formatos NOM-004 (V13) ===== */
.formatos-paciente { margin-top: 18px; border: 1px solid #cfe0f0; background: #f5f9fd; border-radius: 8px; padding: 14px; }
.formatos-paciente h3 { color: #0b3c5d; margin: 0; font-size: 16px; }
.fmt-botones { display: flex; flex-wrap: wrap; gap: 6px; }
.fmt-botones .btn-mini:disabled { opacity: 0.45; cursor: not-allowed; }
.fmt-aviso { background: #fff7e6; color: #7a4a00; border-radius: 6px; padding: 6px 10px; font-size: 13px; margin: 0 0 8px; }
.fmt-modal { max-width: 640px !important; }
.fmt-modal textarea, .fmt-modal select { width: 100%; padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px; font: inherit; font-size: 14px; font-weight: 400; }
.fmt-campos { display: flex; flex-direction: column; gap: 10px; }
.fmt-h4 { color: #0b3c5d; margin: 6px 0 0; font-size: 14px; border-bottom: 1px solid #e2e8f0; padding-bottom: 3px; }
.fmt-firma { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: #334155; }
.fmt-firma canvas { width: 100%; max-width: 500px; height: 130px; border: 1px dashed #94a3b8; border-radius: 6px; background: #fff; touch-action: none; }
.fmt-firma .btn-mini { align-self: flex-start; }
.fmt-dl { display: grid; grid-template-columns: 170px 1fr; gap: 4px 10px; font-size: 13px; }
.fmt-dl dt { color: #64748b; } .fmt-dl dd { white-space: pre-wrap; }
.fmt-firma-img { max-width: 220px; max-height: 70px; border-bottom: 1px solid #94a3b8; display: block; margin-top: 4px; }
@media (max-width: 600px) { .fmt-dl { grid-template-columns: 1fr; } }

/* ===== V14 · Documentos desde la app del paciente ===== */
.fmt-app { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a5f; border-radius: 8px; padding: 8px 12px; font-size: 13px; margin: 0 0 8px; }
.fmt-app-listo { background: #ecfdf5; border-color: #6ee7b7; color: #065f46; }
.fmt-app-botones { display: flex; gap: 6px; flex-wrap: wrap; }
.pc-doc { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid #e2e8f0; font-size: 14px; }
.pc-doc:last-child { border-bottom: none; }
.fmt-ok { background: #ecfdf5; color: #065f46; border-radius: 6px; padding: 6px 10px; font-size: 13px; margin: 0 0 8px; }
.fmt-texto-legal { white-space: pre-wrap; font-size: 13px; line-height: 1.5; max-height: 320px; overflow-y: auto; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 12px; background: #f8fafc; }

/* ===== Mi agenda del paciente (vista del terapeuta) ===== */
.pp-ag-stats { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; margin-bottom: 8px; }
.pp-ag-barras { display: flex; gap: 4px; align-items: flex-end; height: 90px; padding: 4px 0; }
.pp-ag-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; height: 100%; }
.pp-ag-barra { position: relative; flex: 1; width: 100%; max-width: 22px; }
.pp-ag-barra span { position: absolute; bottom: 0; left: 0; right: 0; border-radius: 3px 3px 0 0; }
.pp-ag-barra .prog { background: #e2e8f0; }
.pp-ag-barra .hecha { background: #14a394; }
.pp-ag-col small { font-size: 10px; color: #64748b; }
.btn-mi-agenda { text-decoration: none; display: inline-flex; align-items: center; }

/* Registro de pensamientos del paciente (vista del terapeuta) */
.pp-registros { display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow-y: auto; }
.pp-registro { border: 1px solid #e2e8f0; border-radius: 8px; padding: 6px 10px; font-size: 13px; background: #fff; }
.pp-registro.riesgo { border-color: #fca5a5; background: #fff5f5; }
.pp-registro summary { cursor: pointer; }
.pp-registro dl { display: grid; grid-template-columns: 170px 1fr; gap: 4px 10px; margin: 8px 0 4px; }
.pp-registro dt { color: #64748b; }
.pp-registro dd { margin: 0; white-space: pre-wrap; }
@media (max-width: 600px) { .pp-registro dl { grid-template-columns: 1fr; } }

/* ---------- Identidad verificada y registro de menor ---------- */
.fmt-aviso.fmt-suave { background: #f3f6f9; color: #3d5266; }
.fmt-menor { background: #fff7e6; border: 1px solid #f3c96b; border-radius: 10px; padding: 10px 12px; margin: 8px 0; font-size: 13px; line-height: 1.55; color: #5a3d00; }
.fmt-btn-alerta { box-shadow: 0 0 0 2px #f3a712; }
.fmt-resp { border: 1px solid #d5dee7; border-radius: 10px; padding: 8px 12px 10px; margin: 8px 0; }
.fmt-resp legend { font-weight: 600; color: #0b3c5d; font-size: 13px; padding: 0 6px; }
.fmt-resp .check-linea { margin: 4px 0; }

/* ---------- Pie de derechos ---------- */
.pie-derechos { text-align: center; font-size: 12px; color: #6b7280; padding: 18px 16px 26px; line-height: 1.5; }
@media print { .pie-derechos { display: none; } }