/*
 * STYLE.CSS — Estilos de toda la aplicación.
 *
 * Índice:
 * 1. Base compartida: tipografía, fondo y tarjetas.
 * 2. Inicio.
 * 3. Formularios compartidos: login y registro.
 * 4. Login y logo de AgencyLog.
 * 5. Registro de agencias y formularios que reutilizan pagina-registro.
 * 6. Panel de la cuenta y logo de la agencia.
 * 7. Usuarios: listado del equipo.
 * 8. Confirmación de agencia creada.
 * 9. Bitácora original.
 * 10. Ejercicio del contador.
 * 11. Ajustes para celular.
 * 12. Clientes: búsquedas, listado y formulario del viajero.
 * 13. Expediente y viajes: ficha, secciones y bitácora cronológica.
 * 14. SUPER_ADMIN: listado de agencias y edición del logo.
 *
 * Las clases pagina-* se colocan en el <body> de cada vista.
 * Ejemplo: .pagina-login input afecta solo los inputs dentro de pagina-login.
 * Si una vista tiene varias clases, sus reglas se combinan. Cuando tienen
 * igual especificidad, gana la declaración que aparece más abajo.
 */

/* ======================================================================
   1. BASE COMPARTIDA
   ====================================================================== */

/* Tipografía general para todas las páginas. */
/* Crédito del desarrollador: footer compartido de las vistas. */
.app-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  box-sizing: border-box;
  max-width: 1100px;
  margin: 32px auto 16px;
  padding: 16px 32px;
  border-top: 1px solid #e5e6e8;
  color: #62666b;
  font-size: 13px;
  text-align: left;
}

.app-footer p {
  margin: 0;
  flex: 1 1 260px;
}

/* Inicio: contenido de agencia y acciones independientes de SUPER_ADMIN. */
.panel-descripcion { color: #62666b; font-size: 14px; margin: 12px 0 32px; }
.panel-busqueda { max-width: 650px; margin: 0 0 40px; }
.panel-busqueda label { display: block; margin-bottom: 10px; font-size: 14px; }
.panel-busqueda-campos { display: flex; flex-wrap: wrap; gap: 12px; }
.panel-busqueda input { min-width: 0; flex: 1; padding: 12px; font: inherit; border: 1px solid #d3d6da; border-radius: 4px; background: #fff; }
.pagina-panel .panel-busqueda button { margin: 0; padding: 10px 16px; border: 1px solid #d3d6da; border-radius: 4px; background: #fff; color: #25282b; cursor: pointer; }
.panel-crear-cliente { display: inline-flex; align-items: center; padding: 10px 16px; border: 1px solid #d3d6da; border-radius: 4px; color: #25282b; font: inherit; text-decoration: none; white-space: nowrap; }
.panel-crear-cliente:hover { background: #f6f6f6; }
.panel-clientes-cabecera { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.panel-clientes-cabecera h3 { margin: 0; font-size: 16px; }
.panel-clientes a, .panel-agencias a { color: #62666b; text-underline-offset: 4px; }
.panel-clientes-cabecera a { font-size: 13px; }
.panel-tabla-contenedor { overflow-x: auto; }
.panel-tabla-clientes { width: 100%; border-collapse: collapse; text-align: left; font-size: 14px; }
.panel-tabla-clientes th { padding: 16px 16px 16px 0; color: #62666b; font-size: 13px; font-weight: normal; border-bottom: 1px solid #e5e6e8; }
.panel-tabla-clientes td { padding: 20px 16px 20px 0; border-bottom: 1px solid #e5e6e8; overflow-wrap: anywhere; }
.panel-cliente-nombre { display: block; font-weight: 600; }
.panel-cliente-correo { display: block; color: #62666b; font-size: 13px; margin-top: 4px; }
.panel-tabla-clientes .panel-cliente-abrir { text-align: right; padding-right: 0; }
.panel-vacio, .panel-resultados-aviso { color: #62666b; font-size: 14px; padding: 16px 0; }
.panel-agencias > div { padding: 24px 0; border-bottom: 1px solid #e5e6e8; }
.panel-agencias h3 { font-size: 16px; margin: 0 0 8px; }
.panel-agencias p { color: #62666b; font-size: 14px; margin: 0 0 12px; }
@media (max-width: 640px) {
  .panel-busqueda input { font-size: 16px; }
  .panel-busqueda-campos input { flex-basis: 100%; }
  .panel-tabla-clientes th:nth-child(3), .panel-tabla-clientes td:nth-child(3) { display: none; }
  .panel-cliente-abrir a { display: inline-block; padding: 12px 0; }
}
@media (max-width: 380px) {
  .panel-tabla-clientes th:nth-child(2), .panel-tabla-clientes td:nth-child(2) { display: none; }
}

.app-footer-sesion {
  margin: 0 0 0 auto;
}

.app-footer .app-footer-cerrar {
  margin: 0;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.app-footer-cerrar:hover {
  color: #25282b;
}

@media (max-width: 640px) {
  .app-footer {
    padding: 16px 18px;
  }

  .app-footer .app-footer-cerrar {
    min-height: 44px;
  }
}

/* Empuja el footer al pie en páginas cortas y conserva el flujo en páginas largas. */
body.pagina-con-footer {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
}

.pagina-con-footer > main,
.pagina-con-footer > header,
.pagina-con-footer > .app-footer {
  flex-shrink: 0;
}

.pagina-con-footer > .app-footer {
  width: 100%;
  margin-top: auto;
}

body {
  font-family: Arial, sans-serif;
}

/* Fondo gris claro y color principal del texto de estas pantallas. */
body.pagina-inicio,
body.pagina-login,
body.pagina-registro,
body.pagina-panel,
body.pagina-bitacora {
  background: #f1f5f9;
  color: #172033;
}

/* Quita el margen predeterminado del navegador en estas páginas. */
body.pagina-inicio,
body.pagina-login,
body.pagina-registro {
  margin: 0;
}

/* Tarjeta principal: centrada horizontalmente, blanca y con esquinas curvas. */
.pagina-inicio main,
.pagina-login main,
.pagina-registro main,
.pagina-panel main {
  margin: auto;
  background: white;
  border-radius: 16px;
}

/* ======================================================================
   2. INICIO — inicio.ejs / clase pagina-inicio
   ====================================================================== */

/* Espacio entre el contenido y los bordes de la ventana. */
body.pagina-inicio {
  padding: 40px 20px;
}

/* Limita el ancho de la tarjeta y agrega espacio interior. */
.pagina-inicio main {
  max-width: 800px;
  padding: 32px;
}

/* ======================================================================
   3. FORMULARIOS COMPARTIDOS — pagina-login y pagina-registro
   ====================================================================== */

/* Separación exterior de las pantallas con formularios. */
body.pagina-login,
body.pagina-registro {
  padding: 32px 20px;
}

/* Cada etiqueta ocupa una línea propia, encima del campo. */
.pagina-login label,
.pagina-registro label {
  display: block;
}

/* Campos y botones: ancho completo, borde, tipografía y espacio interior.
   border-box incluye el borde y el padding dentro del ancho del elemento. */
.pagina-login input,
.pagina-login button,
.pagina-registro input,
.pagina-registro button {
  box-sizing: border-box;
  width: 100%;
  padding: 12px;
  font: inherit;
  border: 1px solid #94a3b8;
  border-radius: 6px;
}

/* Apariencia común de los botones principales. */
.pagina-login button,
.pagina-registro button {
  background: #2563eb;
  color: white;
  border: 0;
}

/* ======================================================================
   4. LOGIN — login.ejs / clase pagina-login
   ====================================================================== */

/* Tarjeta más estrecha para el formulario de acceso. */
.pagina-login main {
  max-width: 430px;
  padding: 28px;
}

/* Logo de la aplicación centrado y sin deformar, adaptable al ancho del login. */
.pagina-login .logo-agencylog {
  display: block;
  width: 240px;
  max-width: 100%;
  height: auto;
  margin: 0 auto 12px;
}

/* Separación entre los campos del login. */
.pagina-login label {
  margin-top: 20px;
}

/* Separación entre la etiqueta y el campo o botón. */
.pagina-login input,
.pagina-login button {
  margin-top: 8px;
}

/* El botón queda más separado del último campo. */
.pagina-login button {
  margin-top: 24px;
}

/* Color de los mensajes de error del login. */
.pagina-login [role="alert"] {
  color: #9f1239;
}

/* ======================================================================
   5. REGISTRO / FORMULARIOS — registros.ejs / clase pagina-registro
   También lo reutiliza ModulosUsuarios/agregarUsuario.ejs.
   ====================================================================== */

/* Ancho y espacio interior del formulario. */
.pagina-registro main {
  max-width: 720px;
  padding: 32px;
}

/* Evita que el padding y los bordes aumenten el ancho de los elementos. */
.pagina-registro,
.pagina-registro * {
  box-sizing: border-box;
}

/* Espacio entre preguntas y entre cada etiqueta y su input. */
.pagina-registro label {
  margin-top: 16px;
}

.pagina-registro input {
  margin-top: 6px;
}

/* Espacio interior del botón principal. */
.pagina-registro button {
  padding: 14px;
}

/* Un botón deshabilitado se muestra con menor opacidad. */
.pagina-registro button:disabled {
  opacity: .5;
}

/* Agrupa visualmente campos relacionados, por ejemplo los datos del usuario. */
.pagina-registro fieldset {
  margin: 24px 0;
  padding: 20px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
}

/* Destaca el título del grupo de campos. */
.pagina-registro legend {
  font-weight: bold;
}

/* ======================================================================
   6. PANEL DE LA CUENTA — panel.ejs / clase pagina-panel
   El listado de usuarios también usa esta clase.
   ====================================================================== */

/* Espacio exterior del panel. */
body.pagina-panel {
  padding: 24px;
}

/* Logo original sin deformar; se adapta a pantallas pequeñas. */
.logo-empresa-panel {
  display: block;
  width: auto;
  max-width: min(260px, 100%);
  height: auto;
  max-height: 120px;
  object-fit: contain;
  margin-bottom: 20px;
}

/* Tamaño de la tarjeta y espacio interior. */
.pagina-panel main {
  max-width: 720px;
  padding: 28px;
}

/* Botones del panel, como Cerrar sesión.
   Si el body también tiene pagina-registro, este padding prevalece. */
.pagina-panel button {
  font: inherit;
  padding: 10px;
  margin-top: 24px;
}

/* ======================================================================
   7. USUARIOS — usuarios.ejs / clase pagina-usuarios
   ====================================================================== */

/* Amplía la tarjeta del panel para acomodar la tabla del equipo. */
.pagina-usuarios main {
  max-width: 1000px;
}

/* Permite desplazar la tabla horizontalmente en pantallas estrechas. */
.pagina-usuarios .tabla-usuarios {
  overflow-x: auto;
}

/* La tabla ocupa el ancho disponible y comparte los bordes de sus celdas. */
.pagina-usuarios table {
  width: 100%;
  border-collapse: collapse;
}

/* Título descriptivo de la tabla. */
.pagina-usuarios caption {
  text-align: left;
  padding: 12px 0;
  font-weight: bold;
}

/* Espacio de las celdas, alineación y separación entre filas. */
.pagina-usuarios th,
.pagina-usuarios td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #cbd5e1;
}

/* Fondo de la fila de encabezados. */
.pagina-usuarios th {
  background: #f1f5f9;
}

/* Modal de edición: grupo de campos similar al formulario de agregar usuario. */
.pagina-usuarios #EditarUsuario fieldset {
  padding: 20px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
}

/* Título del grupo de campos y espacio interior de los controles. */
.pagina-usuarios #EditarUsuario legend {
  font-size: 1rem;
  font-weight: bold;
}

.pagina-usuarios #EditarUsuario .form-control,
.pagina-usuarios #EditarUsuario .form-select {
  padding: 12px;
  border-color: #94a3b8;
  border-radius: 6px;
}

/* Evita heredar la separación de los botones del panel dentro del modal. */
.pagina-usuarios #EditarUsuario button {
  margin-top: 0;
}

/* ======================================================================
   8. CONFIRMACIÓN — agencia-creada.ejs / clase pagina-agencia-creada
   ====================================================================== */

/* Espacio alrededor del mensaje de creación exitosa. */
body.pagina-agencia-creada {
  padding: 32px;
}

/* ======================================================================
   9. BITÁCORA ORIGINAL — clase pagina-bitacora
   Estilos del ejercicio anterior; no es todavía el expediente del SaaS.
   ====================================================================== */

/* Centra la página, limita su ancho y deja espacio a los lados. */
body.pagina-bitacora {
  max-width: 750px;
  margin: 40px auto;
  padding: 0 20px;
}

/* Tarjetas del formulario y de cada entrada de la bitácora. */
.pagina-bitacora form,
.pagina-bitacora article {
  background: white;
  padding: 22px;
  border-radius: 12px;
  margin: 16px 0;
}

/* Etiquetas encima de los campos con separación vertical. */
.pagina-bitacora label {
  display: block;
  margin: 14px 0 6px;
}

/* Presentación común de campos de texto y botones. */
.pagina-bitacora input,
.pagina-bitacora textarea,
.pagina-bitacora button {
  font: inherit;
  box-sizing: border-box;
  width: 100%;
  padding: 12px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
}

/* Botón principal; cursor de mano al pasar el puntero. */
.pagina-bitacora button {
  background: #2563eb;
  color: white;
  margin-top: 16px;
  cursor: pointer;
}

/* Texto secundario, como fechas y datos auxiliares. */
.pagina-bitacora small {
  color: #526176;
}

/* Reserva espacio para mensajes y reduce saltos del contenido al mostrarlos. */
.pagina-bitacora #mensaje {
  min-height: 24px;
}

/* ======================================================================
   10. EJERCICIO DEL CONTADOR — clase pagina-contador
   ====================================================================== */

/* Alineación, separación y fondo de la página del ejercicio. */
body.pagina-contador {
  text-align: center;
  padding: 60px;
  background: #eef2ff;
}

/* Apariencia del botón que incrementa el contador. */
.pagina-contador button {
  padding: 12px 24px;
  background: #4338ca;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

/* ======================================================================
   11. RESPONSIVE — ajustes cuando la ventana mide hasta 480px de ancho
   ====================================================================== */

@media (max-width: 480px) {
  /* Reduce el espacio interior del formulario para aprovechar el ancho móvil. */
  .pagina-registro main {
    padding: 20px;
  }

  /* Reduce también el espacio dentro de los grupos de campos. */
  .pagina-registro fieldset {
    padding: 14px;
  }
}

/* ======================================================================
   12. CLIENTES — búsquedas, resultados y mantenimiento de viajeros
   ====================================================================== */
/* Tarjeta amplia y tablas desplazables para no cortar columnas en celular. */
.pagina-clientes main { max-width: 1200px; padding: 28px; }
.tabla-clientes { overflow-x: auto; margin-top: 24px; }
.tabla-clientes table { min-width: 680px; }
/* Las búsquedas y los campos comparten dos columnas en computadora. */
.busquedas-clientes, .campos-cliente { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }
.pagina-clientes fieldset { margin-top: 24px; }
.campo-cliente-completo { grid-column: 1 / -1; }
/* Acciones compactas: los formularios de cada fila no ocupan una línea completa. */
.acciones-cliente { min-width: 160px; }
.acciones-cliente form { display: inline-block; margin: 4px 0; }
.pagina-clientes .btn { width: auto; }
/* Resultados de búsqueda: texto seguro y botones accesibles con teclado. */
.resultados-clientes { list-style: none; padding: 0; margin: 0; border: 1px solid #cbd5e1; border-radius: 8px; max-height: 280px; overflow-y: auto; }
.resultado-cliente { width: 100%; text-align: left; padding: 12px; border: 0; background: white; color: #172033; }
.resultado-cliente:hover, .resultado-cliente:focus-visible { background: #eaf2ff; }
@media (max-width: 700px) {
  .pagina-clientes main { padding: 18px; }
  .busquedas-clientes, .campos-cliente { grid-template-columns: 1fr; }
}

/* ======================================================================
   13. EXPEDIENTE Y VIAJES — ficha central y seguimiento cronológico
   ====================================================================== */
.cabecera-expediente { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.etiqueta-expediente { color: #475569; font-weight: bold; margin-bottom: 6px; }
.nav-expediente { display: flex; flex-wrap: wrap; gap: 20px; border-bottom: 1px solid #cbd5e1; padding: 16px 0; }
.seccion-expediente { padding-top: 28px; scroll-margin-top: 20px; }
.datos-expediente { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.datos-expediente dt { color: #475569; font-size: .9rem; }
.datos-expediente dd { overflow-wrap: anywhere; margin: 4px 0; }
.texto-preservado { white-space: pre-wrap; overflow-wrap: anywhere; }
.form-nota-expediente { background: #f8fafc; padding: 20px; border-radius: 12px; margin-bottom: 28px; }
.form-nota-expediente .form-label { margin-top: 12px; }
.form-nota-expediente button { margin-top: 16px; }
/* La línea y las tarjetas separan cada acción sin esconder el historial. */
.linea-tiempo { list-style: none; border-left: 3px solid #bfdbfe; padding-left: 24px; }
.linea-tiempo li { position: relative; margin-bottom: 18px; }
.linea-tiempo li::before { content: ''; position: absolute; left: -32px; top: 16px; width: 12px; height: 12px; border-radius: 50%; background: #2563eb; }
.linea-tiempo article { border: 1px solid #e2e8f0; border-radius: 10px; padding: 18px; background: #fff; }
.encabezado-entrada { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.encabezado-entrada time, .linea-tiempo small { color: #64748b; font-size: .9rem; }
/* Tareas del expediente: tarjetas y formularios sin depender de JavaScript. */
.lista-tareas { list-style: none; padding: 0; margin: 18px 0; }
.tarjeta-tarea { padding: 20px; border: 1px solid #cbd5e1; border-radius: 12px; margin-bottom: 14px; background: #f8fafc; }
.tarjeta-tarea h3 { font-size: 1.15rem; margin: 0; overflow-wrap: anywhere; }
.tarea-vencida { border-left: 4px solid #b91c1c; }
.detalle-tarea { color: #475569; margin: 10px 0; }
.categoria-tarea { background: #dff5f2; color: #115e59; border-radius: 20px; padding: 5px 12px; }
.campos-tarea { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 16px 0; }
.estado-tarea { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.estado-tarea .form-select { width: auto; }
.editar-tarea, .historial-tareas, .nueva-tarea { margin-top: 18px; }
.nueva-tarea { padding: 18px; background: #eef6ff; border-radius: 12px; }
.seccion-expediente summary { cursor: pointer; font-weight: 600; }
@media (max-width: 700px) {
  .cabecera-expediente { align-items: flex-start; flex-direction: column; }
  .datos-expediente { grid-template-columns: 1fr; }
  .campos-tarea { grid-template-columns: 1fr; }
}

/* ======================================================================
   14. SUPER_ADMIN — agencias registradas y gestión de sus logos
   ====================================================================== */
/* Tarjeta amplia y tabla con desplazamiento horizontal en celulares. */
.pagina-agencias { margin: 0; padding: 24px; background: #f1f5f9; color: #172033; }
.pagina-agencias main { max-width: 1100px; margin: 0 auto; padding: 28px; background: white; border-radius: 12px; }
.tabla-agencias { overflow-x: auto; }
.tabla-agencias table { width: 100%; border-collapse: collapse; }
.tabla-agencias th, .tabla-agencias td { padding: 14px; text-align: left; border-bottom: 1px solid #dbe3ee; }
.tabla-agencias th { background: #eef3f9; }
@media (max-width: 600px) {
  .pagina-agencias { padding: 12px; }
  .pagina-agencias main { padding: 16px; }
}

/* Expediente: pestañas y filas sencillas; colores heredados del tema. */
.pagina-expediente {
  --expediente-borde: #e5e6e8;
  --expediente-divisor: #c8cbd0;
  --expediente-secundario: #62666b;
  --expediente-control: #fff;
}
.pagina-expediente main { font-size: 14px; }
.expediente-ruta { color: var(--expediente-secundario); font-size: 12px; margin: 0 0 24px; }
.expediente-ruta a { color: inherit; text-decoration: none; }
.pagina-expediente .cabecera-expediente h2 { font-size: 24px; margin: 0 0 8px; font-weight: 600; }
.pagina-expediente .cabecera-expediente p { color: var(--expediente-secundario); font-size: 13px; margin: 0; }
.pagina-expediente .nav-expediente { gap: 24px; margin-top: 28px; padding: 0; border-bottom: 1.5px solid var(--expediente-divisor); overflow-x: auto; }
.pagina-expediente .nav-expediente a,
.expediente-seccion-futura { padding: 14px 0; white-space: nowrap; font-size: 13px; color: var(--expediente-secundario); text-decoration: none; }
.pagina-expediente .nav-expediente a[aria-current="location"] { color: inherit; font-weight: 600; border-bottom: 2px solid currentColor; }
.expediente-seccion-futura { opacity: .55; }
.pagina-expediente .seccion-expediente { padding-top: 28px; }
.pagina-expediente .seccion-expediente > .cabecera-expediente h2 { font-size: 17px; }
.expediente-orden { color: var(--expediente-secundario); font-size: 12px; }
.pagina-expediente .linea-tiempo { border: 0; padding: 0; margin: 0; }
.pagina-expediente .linea-tiempo li { margin: 0; }
.pagina-expediente .linea-tiempo li::before { display: none; }
.pagina-expediente .linea-tiempo article { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 20px; padding: 24px 0; border: 0; border-bottom: 1.5px solid var(--expediente-divisor); border-radius: 0; background: none; }
.pagina-expediente .linea-tiempo time { color: var(--expediente-secundario); font-size: 12px; }
.pagina-expediente .linea-tiempo time span { display: block; margin-bottom: 4px; }
.expediente-entrada-contenido p { margin: 12px 0 8px; }
.pagina-expediente .linea-tiempo small { color: var(--expediente-secundario); font-size: 12px; }
.pagina-expediente .form-nota-expediente { max-width: 640px; padding: 0; margin: 28px 0; background: none; border-radius: 0; }
.pagina-expediente .form-control,
.pagina-expediente .form-select { background: var(--expediente-control); color: inherit; border-color: var(--expediente-borde); font-size: 14px; box-shadow: none; }
.pagina-expediente .btn { font-size: 13px; border-radius: 4px; }
.pagina-expediente .btn-primary { background: #e5e6e8; border-color: #e5e6e8; color: #25282b; }
.pagina-expediente .btn-outline-primary { color: inherit; border-color: var(--expediente-borde); }
.pagina-expediente .btn:hover { background: #d3d6da; color: #25282b; border-color: #d3d6da; }
.pagina-expediente .tarjeta-tarea { background: none; border-radius: 0; border-color: var(--expediente-borde); }
.pagina-expediente .nueva-tarea { background: none; padding: 18px 0; }
@media (max-width: 640px) {
  .pagina-expediente .linea-tiempo article { grid-template-columns: 1fr; gap: 10px; }
  .pagina-expediente .linea-tiempo time { display: flex; gap: 8px; }
  .pagina-expediente .nav-expediente { gap: 20px; }
}

/* ======================================================================
   15. Navbar de la pagina
====================================================================== */
body.pagina-panel {
  margin: 0;
  padding: 0;
  background: #fff;
  color: #25282b;
}

.app-navbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
  padding: 16px 32px;
  border-bottom: 1px solid #e5e6e8;
}

.app-navbar-marca {
  display: flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
  font-weight: 600;
  max-width: 260px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.app-navbar-marca img {
  display: block;
  width: auto;
  max-width: 160px;
  height: 44px;
  object-fit: contain;
}

.app-navbar-enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.app-navbar-enlaces a {
  padding: 10px 0;
  color: #62666b;
  font-size: 14px;
  text-decoration: none;
}

.app-navbar-enlaces a:hover,
.app-navbar-enlaces a[aria-current="page"] {
  color: #25282b;
  text-decoration: underline;
  text-underline-offset: 6px;
}

.app-navbar-usuario {
  color: #62666b;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.app-navbar-cuenta {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
  min-width: 0;
  max-width: 100%;
}

.app-navbar-sesion {
  margin: 0;
  flex-shrink: 0;
}

.app-navbar .app-navbar-cerrar {
  width: auto;
  margin: 0;
  padding: 8px 0;
  min-height: 44px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #62666b;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.app-navbar .app-navbar-cerrar:hover {
  color: #25282b;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Paleta personal: se guarda por cuenta en el navegador. */
.interfaz-paleta { position: relative; flex-shrink: 0; }
.interfaz-paleta > summary { list-style: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 44px; cursor: pointer; }
.interfaz-paleta > summary::-webkit-details-marker { display: none; }
.interfaz-paleta > summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.interfaz-paleta-panel { position: absolute; z-index: 10; top: 48px; right: 0; width: 260px; max-width: calc(100vw - 36px); box-sizing: border-box; padding: 18px; border: 1px solid var(--interfaz-borde, #c8cbd0); border-radius: 6px; background: var(--interfaz-superficie, #fff); color: var(--interfaz-texto, #25282b); font-size: 13px; }
.interfaz-paleta-panel p { margin: 12px 0; }
.interfaz-muestras { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.app-navbar .interfaz-muestras button { width: 30px; height: 30px; margin: 0; padding: 0; border: 1px solid #93999f; border-radius: 50%; cursor: pointer; }
.interfaz-muestras button[aria-pressed="true"] { outline: 2px solid currentColor; outline-offset: 2px; }
.interfaz-paleta-panel label { display: block; margin: 0 0 8px; }
.interfaz-paleta-panel input[type="color"] { width: 100%; height: 36px; padding: 2px; border: 1px solid var(--interfaz-borde, #c8cbd0); border-radius: 4px; background: var(--interfaz-superficie, #fff); cursor: pointer; }
.app-navbar .interfaz-restaurar { margin: 14px 0 0; padding: 8px 0; width: auto; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.interfaz-paleta-panel .interfaz-aviso { margin-bottom: 0; }
.interfaz-aviso:empty { display: none; }
body.interfaz-personalizada,
.interfaz-personalizada main { background: var(--interfaz-fondo); color: var(--interfaz-texto); }
.interfaz-personalizada { --expediente-borde: var(--interfaz-borde); --expediente-divisor: var(--interfaz-borde); --expediente-secundario: var(--interfaz-secundario); --expediente-control: var(--interfaz-superficie); }
.interfaz-personalizada[data-interfaz-tema="oscuro"] { color-scheme: dark; }
.interfaz-personalizada[data-interfaz-tema="claro"] { color-scheme: light; }
.interfaz-personalizada .app-navbar,
.interfaz-personalizada .app-footer,
.interfaz-personalizada .panel-tabla-clientes th,
.interfaz-personalizada .panel-tabla-clientes td,
.interfaz-personalizada .tabla-usuarios td { border-color: var(--interfaz-borde); }
.interfaz-personalizada .app-navbar-enlaces a,
.interfaz-personalizada .app-navbar-usuario,
.interfaz-personalizada .app-navbar-cerrar,
.interfaz-personalizada .app-footer,
.interfaz-personalizada .panel-descripcion,
.interfaz-personalizada .panel-cliente-correo,
.interfaz-personalizada .panel-tabla-clientes th,
.interfaz-personalizada .panel-clientes a,
.interfaz-personalizada .panel-agencias a,
.interfaz-personalizada .panel-agencias p,
.interfaz-personalizada .panel-vacio,
.interfaz-personalizada .panel-resultados-aviso,
.interfaz-personalizada .detalle-tarea,
.interfaz-personalizada .datos-expediente dt { color: var(--interfaz-secundario); }
.interfaz-personalizada .panel-busqueda input,
.interfaz-personalizada .panel-busqueda button,
.interfaz-personalizada .panel-crear-cliente,
.interfaz-personalizada .form-control,
.interfaz-personalizada .form-select,
.interfaz-personalizada .tabla-usuarios th { background: var(--interfaz-superficie); color: var(--interfaz-texto); border-color: var(--interfaz-borde); }
.interfaz-personalizada input::placeholder,
.interfaz-personalizada textarea::placeholder { color: var(--interfaz-secundario); opacity: 1; }
@media (max-width: 640px) {
  .interfaz-paleta-panel { position: fixed; top: 76px; right: 18px; left: auto; }
}

.pagina-panel main {
  max-width: 1100px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 32px;
  border-radius: 0;
}

/* Diseño compartido del trabajo de agencia: formularios, tablas y seguimiento. */
.pagina-panel main h1 { font-size: 26px; font-weight: 600; margin: 0 0 18px; }
.pagina-panel main h2 { font-size: 20px; font-weight: 600; }
.pagina-panel main { font-size: 14px; }
.pagina-panel main a { color: inherit; text-underline-offset: 4px; }
.pagina-panel main .btn,
.pagina-panel .modal .btn { width: auto; margin: 0; padding: 9px 14px; border-radius: 4px; font: inherit; font-size: 13px; }
.pagina-panel main .btn-primary,
.pagina-panel .modal .btn-primary { background: #e5e6e8; color: #25282b; border-color: #c8cbd0; }
.pagina-panel main .btn-outline-primary,
.pagina-panel main .btn-outline-secondary,
.pagina-panel .modal .btn-secondary { background: none; color: var(--interfaz-texto, #25282b); border: 1px solid var(--interfaz-borde, #c8cbd0); }
.pagina-panel main .btn-primary:hover,
.pagina-panel main .btn-outline-primary:hover,
.pagina-panel main .btn-outline-secondary:hover { background: #d3d6da; color: #25282b; border-color: #aeb4ba; }
.pagina-formulario main { max-width: 960px; }
.pagina-formulario fieldset { min-width: 0; border: 0; border-top: 1.5px solid var(--interfaz-borde, #c8cbd0); padding: 24px 0; margin: 28px 0 0; }
.pagina-formulario legend { float: none; width: auto; padding-right: 16px; font-size: 16px; font-weight: 600; margin: 0; }
.pagina-formulario .campos-cliente { margin-top: 8px; gap: 22px 28px; }
.pagina-formulario label { display: block; font-size: 13px; margin: 0 0 8px; }
.pagina-panel .form-control,
.pagina-panel .form-select,
.pagina-formulario input:not([type="hidden"]) { box-sizing: border-box; width: 100%; padding: 10px 12px; background-color: var(--interfaz-superficie, #fff); color: inherit; border: 1px solid var(--interfaz-borde, #c8cbd0); border-radius: 4px; font: inherit; box-shadow: none; }
.pagina-panel .form-control:focus,
.pagina-panel .form-select:focus,
.pagina-formulario input:focus { outline: 2px solid var(--interfaz-secundario, #62666b); outline-offset: 2px; }
.pagina-formulario fieldset > input,
.pagina-formulario fieldset > select { margin-bottom: 20px; }
.pagina-panel .form-text { color: var(--interfaz-secundario, #62666b); font-size: 12px; }
.formulario-acciones { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 24px 0 12px; }
.pagina-panel .tabla-clientes table,
.pagina-panel .tabla-usuarios table { width: 100%; border-collapse: collapse; font-size: 14px; --bs-table-bg: transparent; --bs-table-color: var(--interfaz-texto, #25282b); --bs-table-border-color: var(--interfaz-borde, #c8cbd0); --bs-table-hover-bg: var(--interfaz-superficie, #f6f6f6); --bs-table-hover-color: var(--interfaz-texto, #25282b); }
.pagina-panel .tabla-clientes th,
.pagina-panel .tabla-usuarios th { background: none; color: var(--interfaz-secundario, #62666b); font-size: 13px; font-weight: normal; }
.pagina-panel .tabla-clientes th,
.pagina-panel .tabla-clientes td,
.pagina-panel .tabla-usuarios th,
.pagina-panel .tabla-usuarios td { padding: 18px 14px; border-bottom: 1.5px solid var(--interfaz-borde, #c8cbd0); }
.pagina-panel table caption { color: var(--interfaz-secundario, #62666b); font-weight: normal; font-size: 13px; }
.pagina-panel .table .badge { background: var(--interfaz-superficie, #f1f2f3) !important; color: var(--interfaz-texto, #25282b) !important; font-size: 12px; font-weight: normal; border: 1px solid var(--interfaz-borde, #c8cbd0); }
.pagina-expediente .tarjeta-tarea { padding: 20px 0; border: 0; border-bottom: 1.5px solid var(--expediente-divisor); }
.pagina-expediente .categoria-tarea { padding: 4px 8px; background: var(--interfaz-superficie, #f1f2f3); color: inherit; border-radius: 4px; font-size: 12px; }
.pagina-expediente .estado-tarea .form-select { width: auto; }
.pagina-expediente .form-nota-expediente label { display: block; margin-bottom: 8px; font-size: 13px; }
.pagina-expediente .form-nota-expediente button { margin-top: 16px; }
.interfaz-personalizada .modal-content { background: var(--interfaz-superficie); color: var(--interfaz-texto); border-color: var(--interfaz-borde); }
.interfaz-personalizada .modal-header,
.interfaz-personalizada .modal-footer { border-color: var(--interfaz-borde); }
.interfaz-personalizada[data-interfaz-tema="oscuro"] .btn-close { filter: invert(1); }
.interfaz-personalizada .panel-agencias > div { border-color: var(--interfaz-borde); }
@media (max-width: 640px) {
  .pagina-formulario .campos-cliente { grid-template-columns: 1fr; }
  .pagina-panel main h1 { font-size: 23px; }
  .pagina-panel .tabla-usuarios table { min-width: 640px; }
  .pagina-expediente .estado-tarea .form-select { width: 100%; }
}

@media (max-width: 640px) {
  .app-navbar {
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 18px;
  }

  .app-navbar-enlaces {
    order: 3;
    width: 100%;
    gap: 20px;
  }

  .app-navbar-enlaces a {
    padding: 12px 0;
  }

  .pagina-panel main {
    padding: 24px 18px;
  }
}