/* style.css */

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
  background: #f4f6f8;
  color: #333;
}

header {
  background-color: #188d8e;
  color: white;
  padding: 0.5rem 1rem;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding-bottom: 4px;
}

nav {
  margin-top: 0.5rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

button {
  background-color: #2a9293;
  color: white;
  border: none;
  padding: 0.3rem 1.2rem;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s ease;
}

button:hover {
  background-color: #106d6e;
}

button#btnAdmin {
  /* Botón de engranaje con un poco menos de padding */
  padding: 0.3rem 0.6rem;
  font-size: 1.2rem;
  display: none; /* oculto por defecto, se mostrará solo en Historial */
}

.inlined-btn {
  margin-left: 0.5rem;
  margin-top: 0.2rem;
  font-size: 0.9rem;
  padding: 0.2rem 0.6rem;
}

main {
  padding: 1rem 1.5rem;
  max-width: 960px;
  margin: auto;
}

.seccion {
  display: none;
}

.seccion.activa {
  display: block;
}

form label,
form fieldset {
  display: block;
  margin-bottom: 0;
}

h2 {
  margin-top: -1rem;
  margin-bottom: 0.5rem;
  font-size: small;
}

h1 {
  margin-top: -0.5rem;
  margin-bottom: -0.5rem;
  font-size: 1.4rem;
}

form input[type="text"],
form input[type="number"],
form input[type="date"] {
  width: 100%;
  padding: 0.2rem;
  margin-top: 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 0.9rem;
  background-color: white;
}

fieldset {
  position: relative;
  overflow: visible;
  background: white;
  border: 1px solid #ccc;
  padding: 0.5rem;
  border-radius: 6px;
  margin-bottom: 2rem;
}

fieldset legend {
  font-weight: bold;
  padding: 0 0.5rem;
}

/* Resultado general (Nueva Paciente) */
#resultado {
  background: #e6f4ea;
  border-left: 5px solid #188d8e;
  padding: 0.5rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  border-radius: 4px;
  text-align: center;
  color: #000;
  box-sizing: border-box;
}

/* ── Lista de pacientes (Historial) ── */
#listaPacientes {
  list-style: none;
  padding: 0;
}

#listaPacientes li {
  background: white;
  margin: 0.5rem 0;
  padding: 0.75rem;
  border-left: 4px solid #188d8e; /* se ajusta dinámicamente por JS */
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.paciente-info {
  flex: 1;
  min-width: 200px;
}

.paciente-buttons {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

@media (min-width: 600px) {
  .paciente-buttons {
    margin-top: 0;
  }
}

/* ── Autocompletado ── */
@media (min-width: 768px) {
  form input[type="text"],
  form input[type="number"],
  form input[type="date"] {
    /* sin cambios específicos aquí */
  }

  fieldset.columns {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

.subcategoria {
  flex: 1 1 200px;
}
.subcategoria h4 {
  margin: 0.5rem 0 0.2rem;
}
.subcategoria ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.subcategoria li {
  padding: 0.2rem 0.4rem;
  cursor: pointer;
}
.subcategoria li:hover {
  background: #eef;
}

  .bloque-autocompletado {
    flex: 1;
    width: 100%;
  }
}

@media (min-width: 768px) {
  .form-row {
    display: flex;
    gap: 1rem;
  }
  .form-row label {
    flex: 1;
  }
  #fieldsetsContainer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}

.hidden {
  display: none;
}

.bloque-autocompletado {
  position: relative;
  z-index: auto;
}

.bloque-autocompletado input {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.bloque-autocompletado:focus-within {
  z-index: 1000;
}

.bloque-autocompletado:focus-within input {
  border-bottom-color: transparent;
}

fieldset.columns:focus-within {
  z-index: 1000;
}

.bloque-autocompletado .resultados {
  position: absolute;
  top: calc(100% - 1px);
  bottom: auto;
  left: 0;
  width: 100%;
  background: white;
  border-top: none !important;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  max-height: 200px;
  overflow-y: auto;
  pointer-events: auto;
}

.bloque-autocompletado .resultados.above {
  top: auto;
  bottom: calc(100% - 1px);
  border-radius: 4px 4px 0 0;
  border-bottom: none;
}

.bloque-autocompletado .resultados.below {
  top: calc(100% - 1px);
  bottom: auto;
  border-top: none !important;
}

.resultado-item {
  padding: 0.6rem;
  cursor: pointer;
}

.resultado-item:hover {
  background-color: #f0f0f0;
}

.seleccionados {
  margin-top: 10px;
  margin-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  width: 100%;
  padding-left: 10px;
}

@media (min-width: 768px) {
  .seleccionados {
    margin-top: 0;
    margin-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    width: 100%;
    padding-left: 10px;
  }
}

.tag {
  background-color: #d9edf7;
  border: 1px solid #bce8f1;
  border-radius: 16px;
  padding: 0.4rem 0.8rem;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.tag:hover {
  background-color: #c4e3f3;
}

/* ── Quitar float en pantallas grandes ── */
@media (min-width: 768px) {
  #resultado {
    float: left;
    margin-top: 0.5rem;
    margin-right: 1rem;
  }

  #formularioPaciente > button[type="submit"] {
    float: right;
    margin-top: 0.5rem;
  }

  #fieldsetsContainer {
    clear: both;
  }
}

/* ── Contenedor flex para resultado + botón ── */
@media (min-width: 767px) {
  .form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0rem;
  }

  #resultado {
    flex: 1;
    margin-right: 1rem;
  }

  .form-actions button {
    flex: none;
  }
}

/* En móviles, centramos verticalmente */
@media (max-width: 767px) {
  .form-actions {
   /* display: flex;*/
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .form-actions button {
    margin-bottom: 0.5rem;
  }
}

/* --- Gráfico de barra apilada --- */
#barContainer {
  display: flex;
  height: 90px; /* Triple de 30px: ahora 90px */
  width: 100%;
  margin-top: 0.5rem;
  border-radius: 4px;
  overflow: hidden;
}

/* Los colores de cada segmento ahora en tonos parecidos de saturación */
.segment-enc {
  background: #228B22; /* Verde bosque */
}
.segment-cnav {
  background: #32CD32; /* Lima clara */
}
.segment-cpav {
  background: #FFD700; /* Dorado */
}
.segment-mmeg {
  background: #f70c23; /* Naranja rojizo */
}

/* Leyenda debajo de la barra (con valor y porcentaje) */
#legendContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.9rem;
}

.legend-color {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  display: inline-block;
}

.legend-enc .legend-color {
  background: #228B22;
}
.legend-cnav .legend-color {
  background: #32CD32;
}
.legend-cpav .legend-color {
  background: #FFD700;
}
.legend-mmeg .legend-color {
  background: #f70c23;
}

/* ───────────────────────────────────────────────────── */
/* Padding bottom para el párrafo de Total pacientes */
.total-pacientes {
  padding-bottom: 1.5rem; /* espacio para que los brackets no lo cubran */
}

/* Título de la tabla */
.titulo-tabla {
  margin-top: 2.5rem;     /* espacio extra antes de la tabla */
  font-size: 1.1rem;
  font-weight: bold;
  text-align: left;
}

/* ── Formato de la tabla de resultados ── */
#tablaResultados {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem; /* un poco de separación con el título */
}

#tablaResultados th,
#tablaResultados td {
  border: 1px solid #ccc;
  padding: 0.4rem 0.6rem;
  text-align: center;
  font-size: 0.9rem;
}

#tablaResultados th {
  background-color: #f0f0f0;
  font-weight: bold;
}

#tablaResultados tr.row-enc td {
  background-color: rgba(34, 139, 34, 0.1);
}

#tablaResultados tr.row-cnav td {
  background-color: rgba(50, 205, 50, 0.1);
}

#tablaResultados tr.row-cpav td {
  background-color: rgba(255, 215, 0, 0.1);
}

#tablaResultados tr.row-mmeg td {
  background-color: rgba(255, 69, 0, 0.1);
}

/* ▼▼▼ Brackets individuales (afinado) ▼▼▼ */
.chart-wrapper {
  position: relative;
  width: 100%;
}

.group-bracket {
  position: absolute;
  top: -0.9rem;         /* Ajusta para acercar/alejar de la barra */
  height: 1rem;
  pointer-events: none;
}

.group-bracket .bracket-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border-top: 2px solid #333;
}

.group-bracket .bracket-line::before,
.group-bracket .bracket-line::after {
  content: "";
  position: absolute;
  top: -0.1rem;     /* Centrado vertical */
  width: 1.2px;       /* Ancho 1px para capuchones muy delgados */
  height: 0.7rem;   /* Alto de los capuchones */
  background-color: #333;
}

.group-bracket .bracket-line::before {
  left: 0;
}

.group-bracket .bracket-line::after {
  right: 0;
}

.group-bracket .bracket-label {
  position: absolute;
  top: -1.1rem;    /* Un poco encima de la línea */
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.85rem;
  font-weight: bold;
  color: #333;
  white-space: nowrap;
}
/* ▲▲▲ Brackets individuales ▲▲▲ */
/* ───────────────────────────────────────────────────── */

/* ── Estilos de “quick-filters” y selectores de fecha en Informes ── */
.quick-filters {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.quick-filters button {
  flex: none;
  padding: 0.3rem 0.8rem;
  font-size: 0.9rem;
}

.date-selectors {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

/* ── Modal styling (login y detalles) ── */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-contenido {
  background-color: #fff;
  padding: 1rem;
  border-radius: 6px;
  max-width: 400px;
  width: 90%;
  max-height: 80%;
  overflow-y: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  position: relative;
}

.modal-contenido h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  border-bottom: 1px solid #ddd;
  padding-bottom: 0.3rem;
}

.modal .cerrar {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 1.2rem;
  cursor: pointer;
  color: #555;
  transition: color 0.2s;
}

.modal .cerrar:hover {
  color: #000;
}

.modal.hidden {
  display: none;
}


form select {
  width: 100%;
  padding: 0.2rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: white;
  font-size: 0.9rem;
}

/* ───────  Switch estilo iOS ─────── */
.switch-container {
  /*flex: 1;*/
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 15px;
}

.switch-container span {
  margin-right: 0.5rem;
  font-weight: bold;
}

/* El resto de la definición de .switch y .slider debe quedar tal como ya lo tienes. */

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0;
  right: 0; bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 24px;
}

/* La bolita del switch */
.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

/* Texto “NO” cuando está apagado */
.slider:after {
  content: "NO";
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: white;
  transition: 0.4s;
}

/* Cuando el checkbox está marcado (checked) */
.switch input:checked + .slider {
  background-color: #188d8e;
}

/* Mover la bolita 26px a la derecha */
.switch input:checked + .slider:before {
  transform: translateX(19px);
}

/* Cambiar texto a “SI” y reposicionar para centrarlo bajo la bolita */
.switch input:checked + .slider:after {
  content: "SI";
  left: 9px;
}


/* Sugerencias del buscador global */
.resultados {
  position: absolute;
  background: #fff;
  border: 1px solid #ccc;
  max-height: 200px;
  overflow-y: auto;
  width: 100%;
  z-index: 10;
}
.resultado-item {
  padding: 0.4rem;
  cursor: pointer;
}
.resultado-item:hover {
  background: #f0f0f0;
}


/* overlay del modal */
#passwordModal {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.95);
  display: none;          /* se muestra al quitar .hidden */
  align-items: center;
  justify-content: center;
  z-index: 1000;
  transition: opacity 0.2s ease;
}

/* cuando no tiene la clase .hidden */
#passwordModal:not(.hidden) {
  display: flex;
}

/* contenido del modal */
#passwordModal .modal-contenido {
  background: #fff;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  width: 90%;
  max-width: 360px;
  position: relative;
  animation: slideDown 0.2s ease-out;
}

/* animación de entrada */
@keyframes slideDown {
  from {
    transform: translateY(-10%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* título */
#passwordModal h2 {
  margin-bottom: 1rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: #1f2937;
}

/* input de contraseña */
#adminPwdInput {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-size: 1rem;
  margin-bottom: 1rem;
  outline: none;
  transition: border-color 0.2s;
}
#adminPwdInput:focus {
  border-color: #2563eb;
}

/* contenedor de botones */
#adminPwdForm .flex {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* botones */
#adminPwdCancel,
#adminPwdOk {
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color 0.2s;
  border: none;
}

/* botón Cancelar */
#adminPwdCancel {
  background-color: #e5e7eb;
  color: #374151;
}
#adminPwdCancel:hover {
  background-color: #d1d5db;
}

/* botón Aceptar */
#adminPwdOk {
  background-color: #2563eb;
  color: #fff;
}
#adminPwdOk:hover {
  background-color: #1d4ed8;
}

/* ocultar elementos */
.hidden {
  display: none !important;
}