/*
  CSS DE LOS PANELES DE DOCUMENTACIÓN Y ENCUESTAS.
  Una clase se aplica desde HTML con class="nombre-clase".
  Las variables de :root se reutilizan con var(--nombre-variable).
*/

/* SIGSM - estilos de los paneles internos.
   Esta misma hoja está copiada en Ambulancias, Documentación y Encuestas:
   si se cambia acá, hay que cambiarla en los tres módulos. */

:root {
  --color-sidebar-bg: #62A9EE;
  --color-sidebar-bg-active: #4F95DC;
  --color-fondo-panel: #F4F8FC;
  --color-azul-acento: #8FC4F4;
  --color-texto-oscuro: #1C2B36;
  --color-texto-claro: #FFFFFF;
  --color-borde-card: #E2E8F0;
}

body {
  /* Tipo de letra; se usan alternativas si la primera no existe. */
  font-family: "Segoe UI", Arial, sans-serif;
  /* Color de fondo. */
  background-color: var(--color-fondo-panel);
  /* Color del texto. */
  color: var(--color-texto-oscuro);
}

/* Sidebar de navegación */
.sidebar {
  /* Color de fondo. */
  background-color: var(--color-sidebar-bg);
  /* Altura mínima. */
  min-height: 100vh;
  /* Espacio interior entre contenido y borde. */
  padding: 1.5rem 0;
  /* Color del texto. */
  color: var(--color-texto-claro);
}

.sidebar .logo-sidebar {
  /* Ancho. */
  width: 60px;
  /* Margen exterior; separa este elemento de otros. */
  margin: 0 auto 0.5rem;
  /* Forma en que se muestra y organiza el elemento. */
  display: block;
}

.sidebar .nombre-sistema {
  /* Alineación horizontal del texto. */
  text-align: center;
  /* Tamaño del texto. */
  font-size: 0.95rem;
  /* Grosor del texto. */
  font-weight: 600;
  /* Espacio entre letras. */
  letter-spacing: 0.04em;
  /* Margen exterior inferior. */
  margin-bottom: 2rem;
}

.sidebar .nav-link {
  /* Color del texto. */
  color: var(--color-texto-claro);
  /* Espacio interior entre contenido y borde. */
  padding: 0.75rem 1.5rem;
  /* Tamaño del texto. */
  font-size: 0.95rem;
  /* Forma en que se muestra y organiza el elemento. */
  display: flex;
  /* Alineación de los elementos en flex. */
  align-items: center;
  /* Espacio entre elementos. */
  gap: 0.6rem;
}

.sidebar .nav-link:hover {
  /* Color de fondo. */
  background-color: rgba(255, 255, 255, 0.15);
}

.sidebar .nav-link.active {
  /* Color de fondo. */
  background-color: var(--color-sidebar-bg-active);
  /* Grosor del texto. */
  font-weight: 600;
  /* Borde izquierdo. */
  border-left: 4px solid #FFFFFF;
}

.sidebar .nav-divider {
  /* Borde superior. */
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  /* Margen exterior; separa este elemento de otros. */
  margin: 1rem 1.5rem;
}

/* Contenido principal */
.contenido-principal {
  /* Espacio interior entre contenido y borde. */
  padding: 2rem 2.5rem;
}

.encabezado-pagina {
  /* Forma en que se muestra y organiza el elemento. */
  display: flex;
  /* Distribución horizontal en flex. */
  justify-content: space-between;
  /* Alineación de los elementos en flex. */
  align-items: center;
  /* Margen exterior inferior. */
  margin-bottom: 1.75rem;
}

.encabezado-pagina h1 {
  /* Tamaño del texto. */
  font-size: 1.5rem;
  /* Grosor del texto. */
  font-weight: 600;
  /* Margen exterior inferior. */
  margin-bottom: 0;
}

/* Tarjetas */
.card-panel {
  /* Color de fondo. */
  background-color: #FFFFFF;
  /* Borde: grosor, estilo y color. */
  border: 1px solid var(--color-borde-card);
  /* Redondeo de las esquinas. */
  border-radius: 0.75rem;
  /* Espacio interior entre contenido y borde. */
  padding: 1.5rem;
}

/* Tablas */
.table-panel thead {
  /* Color de fondo. */
  background-color: var(--color-azul-acento);
}

.table-panel thead th {
  /* Grosor del texto. */
  font-weight: 600;
  /* Tamaño del texto. */
  font-size: 0.85rem;
  /* Cambia la presentación de las letras. */
  text-transform: uppercase;
  /* Espacio entre letras. */
  letter-spacing: 0.03em;
  /* Color del texto. */
  color: var(--color-texto-oscuro);
  /* Borde inferior. */
  border-bottom: none;
}

.table-panel td {
  /* Alineación vertical del contenido. */
  vertical-align: middle;
  /* Tamaño del texto. */
  font-size: 0.9rem;
}

/* Badges de estado */
.badge-pendiente {
  /* Color de fondo. */
  background-color: #FDE68A;
  /* Color del texto. */
  color: #92400E;
}

.badge-proceso {
  /* Color de fondo. */
  background-color: #BFDBFE;
  /* Color del texto. */
  color: #1E40AF;
}

.badge-finalizado {
  /* Color de fondo. */
  background-color: #BBF7D0;
  /* Color del texto. */
  color: #166534;
}

/* Botón principal reutilizado de autenticación */
.btn-principal {
  /* Color de fondo. */
  background-color: var(--color-azul-acento);
  /* Borde: grosor, estilo y color. */
  border: none;
  /* Color del texto. */
  color: var(--color-texto-oscuro);
  /* Grosor del texto. */
  font-weight: 600;
  /* Espacio entre letras. */
  letter-spacing: 0.03em;
  /* Espacio interior entre contenido y borde. */
  padding: 0.6rem 1.5rem;
  /* Redondeo de las esquinas. */
  border-radius: 0.5rem;
}

.btn-principal:hover {
  /* Color de fondo. */
  background-color: var(--color-sidebar-bg-active);
  /* Color del texto. */
  color: var(--color-texto-claro);
}

/* Responsive: el sidebar se colapsa en mobile */
@media (max-width: 767.98px) {
  .sidebar {
    /* Altura mínima. */
    min-height: auto;
    /* Espacio interior entre contenido y borde. */
    padding: 1rem 0;
  }

  .contenido-principal {
    /* Espacio interior entre contenido y borde. */
    padding: 1.25rem 1rem;
  }

  .encabezado-pagina {
    /* Dirección de los elementos flexibles. */
    flex-direction: column;
    /* Alineación de los elementos en flex. */
    align-items: flex-start;
    /* Espacio entre elementos. */
    gap: 0.75rem;
  }
}

/* Vista mobile-first de documento por QR */
.visor-documento {
  /* Ancho máximo. */
  max-width: 480px;
  /* Margen exterior; separa este elemento de otros. */
  margin: 0 auto;
  /* Espacio interior entre contenido y borde. */
  padding: 1.5rem 1.25rem;
}

.visor-documento .encabezado-doc {
  /* Alineación horizontal del texto. */
  text-align: center;
  /* Margen exterior inferior. */
  margin-bottom: 1.5rem;
}

.visor-documento .logo-sidebar-doc {
  /* Ancho. */
  width: 70px;
  /* Margen exterior; separa este elemento de otros. */
  margin: 0 auto 0.75rem;
  /* Forma en que se muestra y organiza el elemento. */
  display: block;
}

.visor-documento .categoria-doc {
  /* Forma en que se muestra y organiza el elemento. */
  display: inline-block;
  /* Color de fondo. */
  background-color: var(--color-azul-acento);
  /* Color del texto. */
  color: var(--color-texto-oscuro);
  /* Tamaño del texto. */
  font-size: 0.75rem;
  /* Grosor del texto. */
  font-weight: 600;
  /* Cambia la presentación de las letras. */
  text-transform: uppercase;
  /* Espacio entre letras. */
  letter-spacing: 0.04em;
  /* Espacio interior entre contenido y borde. */
  padding: 0.3rem 0.8rem;
  /* Redondeo de las esquinas. */
  border-radius: 2rem;
  /* Margen exterior inferior. */
  margin-bottom: 0.75rem;
}

/* ================================
   VALIDACIÓN DE FORMULARIOS (JavaScript)
   Estas clases las activa/desactiva utilidades.js.
================================ */
.mensaje-error {
  display: none;
  margin: 0.25rem 0 0;
  font-size: 0.8rem;
  color: #D9534F;
}
.mensaje-error.error-message-active {
  display: block;
}
.input-error {
  border-color: #D9534F !important;
  background-color: #FDF2F2;
}
.input-success {
  border-color: #5CB85C !important;
  background-color: #F4FAF4;
}

/* Botón "Volver": evita que la persona quede encerrada en una pantalla. */
.btn-volver {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid #D5DFE9;
  border-radius: 0.5rem;
  background-color: #FFFFFF;
  color: #34536D;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.9rem;
  text-decoration: none;
}

.btn-volver:hover {
  background-color: #F0F6FC;
  color: #1C2B36;
}