/* =====================================================================
   CEOS — Reserva de Horas | v1.0
   assets/css/estilos.css — Diseño replicado de los pantallazos.
   Paleta:
     banda verde agua #8ED0C7 · fondo #EFF1F2 · carbón #3F4650
     chips #F3F4F6 · bordes #E5E7EB · texto #1F2937 · gris #6B7280
     enlace #2563EB · celeste caja #EEF6FB · error #DC2626 · éxito #16A34A
   ===================================================================== */

/* ---------- Base y estructura de página ---------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: #EFF1F2;
  color: #1F2937;
  font-size: 15px;
}

.banda {
  height: 100px;
  background: #8ED0C7;
}

.tarjeta {
  max-width: 1180px;
  margin: -90px auto 36px;
  background: #FFFFFF;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .10);
  padding: 26px 44px 22px;
  min-height: calc(100vh - 140px);
  display: flex;
  flex-direction: column;
}

/* ---------- Marca (encabezado con logo) ---------- */
.marca {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 6px;
}

.marca-logo {
  width: 46px;
  height: 46px;
  background: #A7DED7;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  overflow: hidden;
  flex: none;
}
.marca-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.marca-nombre {
  color: #6E5FA3;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: .5px;
}

.marca-sep {
  width: 1px;
  height: 40px;
  background: #E5E7EB;
  margin: 0 10px;
}

.marca-texto {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.marca-titulo {
  font-weight: 700;
  font-size: 17px;
  color: #1F2937;
}

.marca-sub {
  font-size: 14px;
  color: #6B7280;
}

/* ---------- Barra de pasos (stepper) ---------- */
.fila-pasos {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 18px 0 8px;
}

.boton-atras {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  background: #FFFFFF;
  color: #4B5563;
  font-size: 20px;
  line-height: 40px;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.boton-atras:hover { background: #F9FAFB; }

.pasos {
  list-style: none;
  display: flex;
  flex: 1;
  margin: 0;
  padding: 0;
}

.paso {
  flex: 1;
  text-align: center;
  position: relative;
}

/* línea conectora entre pasos */
.paso::before {
  content: "";
  position: absolute;
  top: 13px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: #E5E7EB;
}
.paso:first-child::before { display: none; }
.paso.hecho::before,
.paso.actual::before { background: #3F4650; }

.paso-punto {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid #D1D5DB;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
}

.paso.actual .paso-punto {
  background: #3F4650;
  border-color: #3F4650;
  box-shadow: 0 0 0 3px #D1D5DB;
}

.paso.hecho .paso-punto {
  background: #3F4650;
  border-color: #3F4650;
}

.paso-nombre {
  display: block;
  margin-top: 7px;
  font-size: 12.5px;
  color: #6B7280;
}

.paso.actual .paso-nombre { color: #1F2937; font-weight: 600; }

/* ---------- Contenido general ---------- */
.contenido {
  flex: 1;
  padding-top: 14px;
}

.col-centro {
  max-width: 560px;
  margin: 26px auto 30px;
}
.col-centro.ancha { max-width: 680px; }

.titulo-pagina {
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  color: #1F2937;
  margin: 6px 0 26px;
}

.nota {
  color: #6B7280;
  font-size: 13px;
}

.enlace {
  color: #2563EB;
  text-decoration: none;
}
.enlace:hover { text-decoration: underline; }

.alerta-error {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #B91C1C;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 13.5px;
  margin-bottom: 18px;
}
.alerta-error ul { margin: 0; padding-left: 18px; }
.alerta-error li { margin: 3px 0; }

/* ---------- Botones ---------- */
.boton {
  display: inline-block;
  padding: 11px 24px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: #E5E7EB;
  color: #1F2937;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.boton.primario {
  background: #3F4650;
  color: #FFFFFF;
}
.boton.primario:hover { background: #2D333C; }

.boton.secundario {
  background: #FFFFFF;
  border-color: #D1D5DB;
  color: #1F2937;
}
.boton.secundario:hover { background: #F9FAFB; }

.boton.deshabilitado {
  background: #E5E7EB;
  color: #9CA3AF;
  cursor: not-allowed;
}
.boton.deshabilitado:hover { background: #E5E7EB; }

.boton.exito { background: #16A34A; color: #FFFFFF; }
.boton.exito:hover { background: #15803D; }

.boton-bloque {
  display: block;
  width: 100%;
}

/* ---------- Inicio: "Busca una hora por" ---------- */
.opcion-tarjeta,
.tarjeta-esp {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 20px 22px;
  margin-bottom: 16px;
  text-decoration: none;
  color: #1F2937;
  font-weight: 600;
  font-size: 15px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  transition: box-shadow .15s, border-color .15s;
}
.opcion-tarjeta:hover,
.tarjeta-esp:hover {
  border-color: #9CA3AF;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

.opcion-icono {
  color: #9CA3AF;
  display: inline-flex;
}

.opcion-texto {
  flex: 1;
}

.lista-esp {
  max-height: 430px;
  overflow-y: auto;
}

/* ---------- Selección de profesional ---------- */
.buscador { margin-bottom: 18px; }

.buscador-input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  color: #1F2937;
}
.buscador-input::placeholder { color: #9CA3AF; }
.buscador-input:focus {
  outline: none;
  border-color: #6B7280;
}

.lista-prof {
  max-height: 480px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tarjeta-prof {
  display: flex;
  gap: 16px;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 18px 20px;
  text-decoration: none;
  transition: box-shadow .15s, border-color .15s;
}
.tarjeta-prof:hover {
  border-color: #9CA3AF;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

.avatar {
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: 50%;
  background: #D8E0EA;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.avatar-lg {
  width: 64px;
  height: 64px;
  min-width: 64px;
}

.avatar-iniciales {
  font-size: 19px;
  font-weight: 600;
  color: #4B5563;
}

.prof-datos {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nombre-prof {
  font-weight: 600;
  font-size: 15px;
  color: #1F2937;
}

.specs-prof {
  font-size: 12.5px;
  line-height: 1.55;
  color: #9CA3AF;
}

/* ---------- Motivo de consulta ---------- */
.tarjeta-motivo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 18px 20px;
  margin-bottom: 14px;
  text-decoration: none;
  transition: box-shadow .15s, border-color .15s;
}
.tarjeta-motivo:hover {
  border-color: #9CA3AF;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

.motivo-nombre {
  font-weight: 600;
  font-size: 15px;
  color: #1F2937;
}

.motivo-esp {
  font-size: 12.5px;
  color: #9CA3AF;
}

/* ---------- Disponibilidad ---------- */
.dispo-zona {
  display: grid;
  grid-template-columns: 46% 1fr;
  gap: 40px;
  align-items: start;
  margin-top: 10px;
}

.panel-prof {
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 22px;
  background: #FFFFFF;
}

.panel-prof-fila {
  display: flex;
  align-items: center;
  gap: 16px;
}

.panel-prof-nombre {
  font-weight: 700;
  font-size: 16px;
  color: #1F2937;
}

.panel-prof-esp {
  font-size: 13px;
  color: #9CA3AF;
  margin-top: 3px;
}

.panel-suc {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #F3F4F6;
}

.panel-suc-label {
  font-size: 12px;
  color: #9CA3AF;
  margin-bottom: 4px;
}

.panel-suc-nombre {
  font-size: 14px;
  color: #1F2937;
}

.panel-suc-dir {
  font-size: 12.5px;
  color: #6B7280;
  margin-top: 2px;
  letter-spacing: .3px;
}

.zona-horarios { min-width: 0; }

.titulo-semana {
  font-size: 15px;
  font-weight: 600;
  color: #1F2937;
  margin-bottom: 12px;
}

.nav-semana {
  display: flex;
  align-items: center;
  gap: 10px;
}

.flecha {
  width: 38px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6B7280;
  font-size: 22px;
  text-decoration: none;
}
.flecha:hover { color: #1F2937; }
.flecha.deshabilitada {
  color: #D1D5DB;
  cursor: not-allowed;
}
.flecha.deshabilitada:hover { color: #D1D5DB; }

.dias-semana {
  display: flex;
  gap: 8px;
  flex: 1;
  justify-content: space-between;
}

.dia {
  flex: 1;
  max-width: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 9px 0;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
a.dia:hover { border-color: #9CA3AF; box-shadow: 0 1px 4px rgba(0,0,0,.07); }

.dia-nombre {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: #9CA3AF;
}

.dia-num {
  font-size: 16px;
  font-weight: 600;
  color: #1F2937;
}

.dia.seleccionado {
  background: #3F4650;
  border-color: #3F4650;
}
.dia.seleccionado .dia-nombre,
.dia.seleccionado .dia-num { color: #FFFFFF; }

.dia.sin-horas {
  background: #F9FAFB;
  border-color: #F3F4F6;
  cursor: not-allowed;
}
.dia.sin-horas .dia-nombre { color: #D1D5DB; }
.dia.sin-horas .dia-num { color: #D1D5DB; }

.titulo-dia {
  font-size: 15px;
  font-weight: 600;
  color: #1F2937;
  margin: 26px 0 12px;
}

.tabs-horario {
  display: inline-flex;
  margin-bottom: 16px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #E5E7EB;
}

.tab {
  padding: 8px 16px;
  background: #FFFFFF;
  color: #374151;
  font-size: 13px;
  text-decoration: none;
  border-right: 1px solid #E5E7EB;
}
.tab:last-child { border-right: none; }

.tab.activo {
  background: #3F4650;
  color: #FFFFFF;
}

.grilla-horas {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}

.hora {
  display: block;
  text-align: center;
  padding: 11px 6px;
  background: #F3F4F6;
  border: 1px solid transparent;
  border-radius: 8px;
  text-decoration: none;
  color: #1F2937;
  font-size: 13.5px;
  font-weight: 500;
  transition: border-color .15s, background .15s;
}
.hora:hover { border-color: #9CA3AF; }

.hora.seleccionada {
  background: #3F4650;
  color: #FFFFFF;
}

.zona-reservar { margin-bottom: 8px; }

/* ---------- Identificación del paciente ---------- */
.tabs-ident {
  display: inline-flex;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #E5E7EB;
  margin-bottom: 22px;
}

.tab-ident {
  padding: 10px 22px;
  background: #FFFFFF;
  color: #374151;
  font-size: 14px;
  text-decoration: none;
  border-right: 1px solid #E5E7EB;
}
.tab-ident:last-child { border-right: none; }

.tab-ident.activo {
  background: #3F4650;
  color: #FFFFFF;
}

.formulario {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fila-campos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.campo label {
  font-size: 12.5px;
  color: #4B5563;
}

label.obligatorio::after {
  content: " *";
  color: #DC2626;
}

.input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  color: #1F2937;
  background: #FFFFFF;
}
.input::placeholder { color: #9CA3AF; }
.input:focus {
  outline: none;
  border-color: #6B7280;
}

.checkbox-linea {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  color: #374151;
  cursor: pointer;
}
.checkbox-linea input {
  margin-top: 2px;
  width: 15px;
  height: 15px;
}

.caja-otro-doc {
  border: 1px dashed #D1D5DB;
  border-radius: 8px;
  padding: 14px;
}

.telefono-caja {
  display: flex;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  overflow: hidden;
}

.prefijo-telefono {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  background: #F9FAFB;
  border-right: 1px solid #E5E7EB;
  font-size: 14px;
  color: #374151;
}

.telefono-caja .input {
  border: none;
  border-radius: 0;
}
.telefono-caja .input:focus { outline: none; }

.consentimiento {
  line-height: 1.5;
}

/* ---------- Confirmación ---------- */
.tarjeta-resumen {
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  padding: 24px;
  background: #FFFFFF;
}

.resumen-prof {
  display: flex;
  gap: 16px;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid #F3F4F6;
}

.resumen-prof-datos {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.resumen-nombre {
  font-weight: 700;
  font-size: 16px;
  color: #1F2937;
}

.resumen-specs {
  font-size: 12.5px;
  color: #9CA3AF;
  margin-top: 3px;
}

.caja-datos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  background: #EEF6FB;
  border-radius: 8px;
  padding: 18px;
  margin: 18px 0;
}

.dato-col {
  min-width: 0;
}

.dato-label {
  display: block;
  font-size: 12px;
  color: #6B7280;
  margin-bottom: 4px;
}

.dato-valor {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: #1F2937;
}

.dato-sub {
  display: block;
  font-size: 12.5px;
  color: #6B7280;
  margin-top: 2px;
}

.cita-tipo {
  font-size: 12.5px;
  color: #6B7280;
}

.cita-sucursal {
  font-size: 14px;
  color: #1F2937;
  margin-top: 3px;
}

.cita-direccion {
  font-size: 13px;
  color: #374151;
  letter-spacing: .3px;
  margin-top: 2px;
}

.aceptacion {
  font-size: 12.5px;
  color: #6B7280;
  margin-top: 16px;
}

.acciones-resumen {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
}

/* ---------- Reserva exitosa ---------- */
.exito-caja {
  text-align: center;
  padding: 20px 10px;
}

.exito-icono {
  width: 66px;
  height: 66px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #16A34A;
  color: #FFFFFF;
  font-size: 30px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.exito-titulo {
  font-size: 22px;
  color: #1F2937;
  margin: 0 0 8px;
}

.exito-texto {
  color: #4B5563;
  font-size: 15px;
  margin: 0 0 22px;
}

.ficha-exito {
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 6px 20px;
  text-align: left;
  margin-bottom: 24px;
}

.ficha-fila {
  padding: 13px 0;
  border-bottom: 1px solid #F3F4F6;
}
.ficha-fila:last-child { border-bottom: none; }

/* ---------- Política de privacidad ---------- */
.politica h3 {
  font-size: 15px;
  color: #1F2937;
  margin: 22px 0 6px;
}

.politica p {
  font-size: 13.5px;
  line-height: 1.7;
  color: #4B5563;
  margin: 0 0 8px;
}

/* ---------- Pie de página ---------- */
.pie {
  text-align: center;
  padding-top: 34px;
  margin-top: 30px;
}

.pie-marca {
  font-size: 13.5px;
  color: #4B5563;
}

.pie-copy {
  font-size: 12px;
  color: #9CA3AF;
  margin-top: 4px;
}

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .tarjeta {
    margin: -80px 12px 24px;
    padding: 20px 18px;
  }

  .fila-pasos { gap: 10px; }
  .paso-nombre { font-size: 10.5px; }
  .marca-sep { display: none; }

  .col-centro { margin: 14px auto 20px; }

  .dispo-zona {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .dias-semana { gap: 5px; }
  .dia { padding: 8px 0; }

  .grilla-horas { grid-template-columns: repeat(3, 1fr); }

  .fila-campos { grid-template-columns: 1fr; }

  .caja-datos { grid-template-columns: 1fr; }

  .acciones-resumen {
    flex-direction: column;
  }
  .acciones-resumen .boton { width: 100%; }
}

/* =====================================================================
   PANEL — BOTONERA PROFESIONAL (rediseño v2.6)
   ===================================================================== */
.pnl {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
  margin-bottom: 20px;
}

.pnl-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px 10px;
}
.pnl-titulo {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #9CA3AF;
  margin-right: auto;
}
.pnl-ver {
  background: #F3F4F6;
  color: #6B7280;
  border-radius: 10px;
  padding: 1px 8px;
  font-weight: 600;
  letter-spacing: 0;
}
.pnl-usuario {
  font-size: 13px;
  color: #6B7280;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pnl-usuario b { color: #1F2937; }
.pnl-rol {
  background: #EEF6FB;
  color: #1D4ED8;
  border-radius: 10px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 600;
}
.pnl-salir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 8px;
  background: #FEF2F2;
  color: #B91C1C;
  border: 1px solid #FECACA;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
}
.pnl-salir:hover { background: #FEE2E2; }
.pnl-salir svg { width: 14px; height: 14px; }

.pnl-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  border-top: 1px solid #F3F4F6;
  padding: 0 8px;
  position: sticky;
  top: 0;
  z-index: 40;
  background: #FFFFFF;
}

.pnl-tab {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 13px 9px;
  text-decoration: none;
  color: #6B7280;
  font-size: 13px;
  font-weight: 600;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.pnl-tab svg { width: 16px; height: 16px; flex: none; }
.pnl-tab:hover { color: #1F2937; background: #F9FAFB; }
.pnl-tab.activo {
  color: #0F766E;
  border-bottom-color: #8ED0C7;
  background: #F2FAF8;
}

.fecha-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.fecha-nav form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.fecha-nav .input { width: auto; }

.tabla-cajas {
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  overflow-x: auto;
  background: #FFFFFF;
}
.tabla-cajas .nota { padding: 18px; }

.tabla-citas {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}
.tabla-citas th {
  text-align: left;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: #9CA3AF;
  padding: 12px 14px;
  border-bottom: 1px solid #E5E7EB;
  background: #F9FAFB;
}
.tabla-citas td {
  padding: 12px 14px;
  border-bottom: 1px solid #F3F4F6;
  font-size: 13.5px;
  vertical-align: top;
}
.tabla-citas tr:last-child td { border-bottom: none; }

.cita-hora {
  font-weight: 700;
  white-space: nowrap;
}

.cita-sub {
  display: block;
  font-size: 12px;
  color: #6B7280;
  margin-top: 2px;
}

.estado {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.estado.reservada  { background: #F3F4F6; color: #4B5563; }
.estado.confirmada { background: #DBEAFE; color: #1D4ED8; }
.estado.atendida   { background: #DCFCE7; color: #15803D; }
.estado.cancelada  { background: #FEE2E2; color: #B91C1C; }
.estado.no_asistida { background: #FEF3C7; color: #B45309; }

.mini-form { display: inline; margin: 0 2px; }

.boton-mini {
  display: inline-block;
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid #D1D5DB;
  background: #FFFFFF;
  color: #374151;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}
.boton-mini:hover { background: #F9FAFB; }
.boton-mini.ok { border-color: #BBF7D0; color: #15803D; background: #F0FDF4; }
.boton-mini.peligro { border-color: #FECACA; color: #B91C1C; background: #FEF2F2; }

.aviso-ok {
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  color: #15803D;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13.5px;
  margin-bottom: 14px;
}

/* =====================================================================
   CONFIGURACIÓN DE AGENDA (v1.2)
   ===================================================================== */
.agenda-caja {
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 18px;
  background: #FFFFFF;
}
.agenda-caja h3 {
  margin: 0 0 10px;
  font-size: 15px;
  color: #1F2937;
}

.fila-horario {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #F3F4F6;
  flex-wrap: wrap;
}
.fila-horario:last-child { border-bottom: none; }

.dia-nombre-seccion {
  width: 96px;
  min-width: 96px;
  font-weight: 600;
  font-size: 13.5px;
  color: #1F2937;
}

.bloque-horario {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #F3F4F6;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
  color: #1F2937;
  margin: 2px 4px 2px 0;
}
.bloque-horario .mini-form { margin: 0; }
.bloque-horario .boton-mini { padding: 2px 7px; }

/* ---- CRUDs del panel (v1.3) ---- */
.grilla-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 18px;
}
@media (max-width: 820px) {
  .grilla-checks { grid-template-columns: 1fr; }
}

.agenda-caja .boton { margin-top: 10px; }
.tabla-citas .input { padding: 6px 9px; font-size: 13px; }

/* ---- Reportes y fotos (v1.4) ---- */
.avatar.con-foto { overflow: hidden; }
.avatar.con-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.caja-foto {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.kpi-cajas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.kpi-caja {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  padding: 14px 16px;
  text-align: center;
}

.kpi-num {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: #1F2937;
}
.kpi-num.verde { color: #15803D; }
.kpi-num.rojo  { color: #B91C1C; }
.kpi-num.ambar { color: #B45309; }

.kpi-label {
  display: block;
  font-size: 12px;
  color: #6B7280;
  margin-top: 4px;
}

/* Aviso ámbar y marcador de especialidades sin motivo (v1.6) */
.aviso-alerta {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  color: #B45309;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.55;
  margin-bottom: 12px;
}

.esp-sin-motivo {
  color: #B45309;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* =====================================================================
   FICHA CLÍNICA Y ODENTOGRAMA (v2.0)
   ===================================================================== */
.ficha-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 18px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.ficha-tab {
  flex: none;
  padding: 8px 14px;
  border: 1px solid #E5E7EB;
  border-radius: 20px;
  background: #FFFFFF;
  color: #4B5563;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}
.ficha-tab:hover { color: #1F2937; border-color: #9CA3AF; }
.ficha-tab.activa {
  background: #3F4650;
  border-color: #3F4650;
  color: #FFFFFF;
  font-weight: 600;
}
.ficha-tab.desactivada {
  color: #C7CBD1;
  font-size: 12px;
  cursor: not-allowed;
  border-style: dashed;
}

.odontograma {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: #F9FAFB;
  border: 1px solid #F3F4F6;
  border-radius: 10px;
  padding: 16px 12px;
  margin-bottom: 10px;
}

.odo-caption {
  font-size: 11px;
  letter-spacing: .5px;
  color: #9CA3AF;
  text-transform: uppercase;
}

.odo-fila {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}

.odo-gap { width: 24px; }

.odo-separador { height: 8px; }

.pieza {
  width: 36px;
  height: 40px;
  border: 1px solid #9CA3AF;
  border-radius: 7px;
  background: #FFFFFF;
  color: #374151;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .08s, box-shadow .12s;
}
.pieza:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}

.pieza.caries       { background: #FCA5A5; border-color: #EF4444; }
.pieza.restauracion { background: #93C5FD; border-color: #3B82F6; }
.pieza.sellante     { background: #99F6E4; border-color: #14B8A6; }
.pieza.corona       { background: #FDE68A; border-color: #D97706; }
.pieza.endodoncia   { background: #A7F3D0; border-color: #10B981; }
.pieza.implante     { background: #DDD6FE; border-color: #8B5CF6; }
.pieza.protesis     { background: #FED7AA; border-color: #F97316; }
.pieza.fractura     { background: #FECACA; border-color: #DC2626; border-style: dashed; }
.pieza.ausente      { background: #E5E7EB; border-color: #9CA3AF; color: #6B7280; text-decoration: line-through; }

.odo-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 12px;
}
.leyenda-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #4B5563;
}
.leyenda-punto {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid #9CA3AF;
  display: inline-block;
}

/* =====================================================================
   ODONTOGRAMA PRO (v2.1)
   ===================================================================== */
.oculto { display: none; }

.oto-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.oto-paleta {
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  padding: 14px;
  background: #F9FAFB;
}
.oto-paleta h3 {
  margin: 0 0 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #9CA3AF;
}
.oto-herr {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 9px;
  margin-bottom: 5px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  background: #FFFFFF;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  color: #374151;
  text-align: left;
}
.oto-herr:hover { border-color: #9CA3AF; }
.oto-herr.activa {
  border-color: #3F4650;
  box-shadow: 0 0 0 2px #D1D5DB;
  font-weight: 600;
}
.oto-herr-swatch {
  width: 15px;
  height: 15px;
  border-radius: 4px;
  border: 1px solid #9CA3AF;
  flex: none;
}
.oto-herr-tag {
  margin-left: auto;
  font-size: 10.5px;
  color: #9CA3AF;
}
.oto-contadores {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: #4B5563;
  border-top: 1px solid #E5E7EB;
  margin-top: 10px;
  padding-top: 10px;
}
.oto-contadores b { color: #1F2937; }
.oto-paleta .boton { margin-top: 8px; }
#oto-estado-guardado { min-height: 16px; margin: 6px 0 0; color: #B45309; font-size: 12px; }
.boton:disabled { opacity: .5; cursor: not-allowed; }
.boton:disabled:hover { background: #3F4650; }

.oto-modos {
  display: inline-flex;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 14px;
}
.oto-modo {
  padding: 8px 18px;
  background: #FFFFFF;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13.5px;
  color: #374151;
}
.oto-modo.activo { background: #3F4650; color: #FFFFFF; font-weight: 600; }

.oto-grupo {
  background: #F9FAFB;
  border: 1px solid #F3F4F6;
  border-radius: 10px;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.oto-caption {
  font-size: 11px;
  color: #9CA3AF;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.oto-arco {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
  width: 100%;
}

.oto-pieza {
  width: 42px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2px;
  font-family: inherit;
}
.oto-pieza svg { width: 30px; height: 40px; }
.oto-forma { fill: #FFFFFF; stroke: #64748B; stroke-width: 1.5; }
.oto-num { font-size: 10px; color: #6B7280; font-weight: 600; margin-top: 1px; }
.oto-sup-dot { display: none; stroke: #FFFFFF; stroke-width: .8; }
.oto-pieza:hover .oto-forma { stroke: #3F4650; }
.oto-pieza.con-cambios .oto-num { color: #B45309; }
.oto-pieza.con-cambios svg { filter: drop-shadow(0 0 2px rgba(180, 83, 9, .65)); }

.estado-caries .oto-forma       { fill: #FCA5A5; }
.estado-restauracion .oto-forma { fill: #93C5FD; }
.estado-sellante .oto-forma     { fill: #99F6E4; }
.estado-corona .oto-forma       { fill: #FDE68A; }
.estado-endodoncia .oto-forma   { fill: #A7F3D0; }
.estado-implante .oto-forma     { fill: #DDD6FE; }
.estado-protesis .oto-forma     { fill: #FED7AA; }
.estado-fractura .oto-forma     { fill: #FECACA; stroke-dasharray: 3 2; }
.estado-a_extraer .oto-forma    { fill: #FECACA; stroke: #DC2626; stroke-dasharray: 3 2; }
.estado-ausente .oto-forma      { fill: #E5E7EB; }
.estado-ausente .oto-num        { text-decoration: line-through; color: #9CA3AF; }
.oto-pieza.con-plan .oto-forma  { stroke: #F59E0B; stroke-width: 2; stroke-dasharray: 3 2; }

.oto-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
  padding: 16px;
}
.oto-modal-caja {
  background: #FFFFFF;
  border-radius: 12px;
  padding: 18px 20px;
  width: min(340px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
}
.oto-modal-titulo { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.oto-modal-titulo b { font-size: 16px; }
.oto-modal-titulo .nota { flex: 1; }
.omo-x {
  border: none;
  background: #F3F4F6;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  color: #374151;
}
#omo-grande { width: 68px; height: 90px; display: block; margin: 0 auto 6px; }

.omo-seccion {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #9CA3AF;
  margin: 12px 0 6px;
}
.omo-herr-sup { display: flex; gap: 6px; }
.omo-sup-tool {
  flex: 1;
  padding: 7px 4px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  background: #FFFFFF;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  color: #374151;
}
.omo-sup-tool.activo {
  border-color: #3F4650;
  box-shadow: 0 0 0 2px #D1D5DB;
  font-weight: 600;
}

.oto-cruz {
  display: grid;
  grid-template-columns: repeat(3, 48px);
  gap: 4px;
  justify-content: center;
  margin: 8px auto 2px;
}
.oto-cruz-medio { display: contents; }
.oto-cruz button {
  width: 48px;
  height: 40px;
  border: 1px solid #9CA3AF;
  border-radius: 8px;
  background: #FFFFFF;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  color: #374151;
}
.oto-cruz button:hover { border-color: #3F4650; }

.omo-pieza-estados { display: flex; flex-wrap: wrap; gap: 5px; }
.omo-estado {
  padding: 6px 10px;
  border: 1px solid #E5E7EB;
  border-radius: 20px;
  background: #FFFFFF;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  color: #374151;
}
.omo-estado.activo {
  border-color: #3F4650;
  background: #3F4650;
  color: #FFFFFF;
  font-weight: 600;
}
#omo-nota { width: 100%; min-height: 54px; margin-top: 12px; resize: vertical; }
.omo-acciones { display: flex; gap: 8px; margin-top: 12px; }
.omo-acciones .boton { flex: 1; }

@media (max-width: 820px) {
  .oto-layout { grid-template-columns: 1fr; }
}

/* =====================================================================
   PERIDONTOGRAMA (v2.2)
   ===================================================================== */
.perio-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.perio-chip {
  width: 34px;
  padding: 4px 0;
  text-align: center;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #374151;
  text-decoration: none;
  background: #FFFFFF;
}
.perio-chip:hover { border-color: #9CA3AF; }
.perio-chip.datos { background: #EEF6FB; border-color: #8ED0C7; }
.perio-chip.actual { background: #3F4650; color: #FFFFFF; border-color: #3F4650; }

.perio-sitios {
  display: grid;
  grid-template-columns: repeat(6, minmax(105px, 1fr));
  gap: 10px;
}
.perio-sitio {
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 8px;
  background: #F9FAFB;
}
.perio-sitio h4 {
  margin: 0 0 6px;
  font-size: 11px;
  color: #6B7280;
  text-align: center;
  letter-spacing: .4px;
}
.perio-sitio .campo { margin-bottom: 6px; }
.perio-sitio label { font-size: 11px; }
.perio-num {
  width: 100%;
  padding: 5px;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  text-align: center;
  color: #1F2937;
}
.perio-num:focus { outline: none; border-color: #6B7280; }
.perio-checks {
  display: flex;
  gap: 8px;
  justify-content: center;
  font-size: 11.5px;
  color: #374151;
}
.perio-checks input { width: 13px; height: 13px; }

.perio-tabla td { text-align: center; }
.perio-tabla td:first-child { text-align: left; }
.ps-alta {
  background: #FEE2E2;
  color: #B91C1C;
  font-weight: 700;
  border-radius: 4px;
  padding: 1px 5px;
}
.dot-sang, .dot-placa {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-left: 3px;
  vertical-align: middle;
}
.dot-sang { background: #DC2626; }
.dot-placa { background: #94A3B8; }

@media (max-width: 820px) {
  .perio-sitios { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================================
   MÓVIL — refinamiento de diseño (v2.4)
   ===================================================================== */
.solo-movil { display: none; }

.cita-movil {
  display: block;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: #FFFFFF;
}
.cita-movil-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.cita-movil-nombre {
  font-weight: 700;
  font-size: 15px;
  color: #1F2937;
  margin-bottom: 2px;
}
.cita-movil-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #F3F4F6;
}

@media (max-width: 760px) {
  .solo-escritorio { display: none !important; }
  .solo-movil { display: block !important; }

  .tarjeta { padding: 16px 14px; }
  .titulo-pagina { font-size: 19px; }
  .agenda-caja { padding: 14px; }

  /* Formularios y filtros apilados a lo ancho */
  .fecha-nav { flex-direction: column; align-items: stretch; }
  .fecha-nav form { flex-direction: column; align-items: stretch; }
  .fecha-nav .input { width: 100%; }
  .fecha-nav .boton { width: 100%; }

  /* Tablas: scroll suave y celdas compactas */
  .tabla-cajas { -webkit-overflow-scrolling: touch; }
  .tabla-citas { min-width: 640px; }
  .tabla-citas th, .tabla-citas td { padding: 9px 10px; font-size: 12.5px; }
  .boton-mini { padding: 7px 11px; font-size: 12px; }

  /* Indicadores en dos columnas */
  .kpi-cajas { grid-template-columns: repeat(2, 1fr); }

  /* Odontograma: arco deslizable, dientes compactos, paleta arriba */
  .oto-arco {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    padding: 2px;
  }
  .oto-pieza { width: 38px; }
  .oto-pieza svg { width: 27px; height: 36px; }
  .oto-paleta > div { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  .oto-herr-tag { display: none; }
  .oto-cruz { grid-template-columns: repeat(3, 56px); }
  .oto-cruz button { width: 56px; }

  /* Navegación táctil */
  .pnl-nav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .pnl-nav::-webkit-scrollbar { display: none; }
  .pnl-tab { padding: 10px 12px 8px; font-size: 12.5px; }
  .pnl-tab svg { width: 15px; height: 15px; }
  .pnl-top { padding: 10px 12px 8px; }
  .pnl-titulo { font-size: 10.5px; }
  .ficha-tab { padding: 9px 14px; }
}

/* Ficha en modo solo lectura (recepción con permiso "ficha_ver") */
.solo-lectura .oto-pieza { pointer-events: none; }
.solo-lectura .oto-paleta { display: none; }

/* Elección de día dentro de los próximos 30 días (cita rápida v2.11) */
.dias30 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dias30 .dia { flex: none; width: 72px; }
.dia-libres {
  font-size: 9.5px;
  color: #15803D;
  font-weight: 600;
}
.dia.sin-horas .dia-libres { color: #C7CBD1; font-weight: 400; }
.dia.seleccionado .dia-libres { color: #CFF5EC; }

/* =====================================================================
   AGENDA MULTI-VISTA (v2.5)
   ===================================================================== */
.agenda-vistas {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 14px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.agenda-vista {
  flex: none;
  padding: 9px 16px;
  border: 1px solid #E5E7EB;
  border-radius: 20px;
  background: #FFFFFF;
  color: #374151;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.agenda-vista:hover { border-color: #9CA3AF; }
.agenda-vista.activo {
  background: #3F4650;
  border-color: #3F4650;
  color: #FFFFFF;
}

.resumen-tira {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.r-item {
  background: #F9FAFB;
  border: 1px solid #F3F4F6;
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
}
.r-num { display: block; font-size: 20px; font-weight: 700; color: #1F2937; }
.r-num.verde { color: #15803D; }
.r-label { display: block; font-size: 11px; color: #6B7280; margin-top: 2px; }

.color-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
}

.semana-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
}
.semana-grilla { display: flex; gap: 8px; min-width: max-content; }
.semana-dia {
  width: 225px;
  flex: none;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  background: #F9FAFB;
}
.semana-dia.hoy { border-color: #3F4650; box-shadow: 0 0 0 2px #D1D5DB; }
.semana-dia-cab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 12px;
  background: #FFFFFF;
  border-bottom: 1px solid #F3F4F6;
  border-radius: 10px 10px 0 0;
  text-decoration: none;
  color: #374151;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
}
.semana-cita {
  display: block;
  margin: 8px;
  padding: 8px 10px;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-left: 4px solid #9CA3AF;
  border-radius: 8px;
  text-decoration: none;
  color: #1F2937;
  font-size: 13px;
}
.semana-cita:hover { border-color: #9CA3AF; }
.semana-cita .sc-sub { display: block; font-size: 11.5px; color: #6B7280; margin-top: 2px; }
.semana-vacio { padding: 10px 12px; font-size: 12px; color: #9CA3AF; }

@media (min-width: 900px) {
  .semana-grilla {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    width: 100%;
    min-width: 0;
  }
  .semana-dia { width: auto; }
}

@media (max-width: 760px) {
  .resumen-tira { grid-template-columns: repeat(2, 1fr); }
  .agenda-vista { padding: 10px 16px; }
}

/* =====================================================================
   RECETAS (v2.7)
   ===================================================================== */
.rx-fila {
  position: relative;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  padding: 14px 40px 12px 12px;
  margin-bottom: 10px;
  background: #F9FAFB;
}
.rx-fila .rx-quitar {
  position: absolute;
  top: 8px;
  right: 8px;
}