@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
  --azul-primario: #007AD1;
  --azul-oscuro: #003B6F;
  --azul-claro: #DEEDF7;
  --texto-principal: #212529;
  --texto-secundario: rgba(0, 0, 0, 0.65);
  --blanco: #FFFFFF;
  --error: #DC3545;
  --exito: #198754;
}

* {
  box-sizing: border-box;
}

html {
  /* Reserva siempre el espacio de la barra de scroll vertical, exista o
     no. Sin esto, el bloque `.contenido` (centrado con margin: 0 auto)
     se recorre unos pixeles cada vez que una pestaña con poco contenido
     (p. ej. "Alertas") hace que la página deje de necesitar scroll —
     visible como que la barra de pestañas/filtros "salta" de lugar al
     cambiar de pestaña. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  background-color: var(--blanco);
  color: var(--texto-principal);
}

.contenedor-centrado {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.tarjeta {
  width: 100%;
  max-width: 400px;
  background: var(--blanco);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 24px rgba(0, 59, 111, 0.08);
}

/* Logo del login: el mismo archivo del menú lateral, centrado arriba del
   título. El JPEG (640×414) trae margen blanco — lo visible es ~74% de
   su alto — y ese blanco ya aporta parte de la separación con el título.
   A 140 px de alto alcanza hasta pantallas 2× (280 de 414 px físicos);
   en 3× (420 px) queda prácticamente 1:1. Más grande pediría el SVG. */
.login-logo {
  display: block;
  height: 140px;
  width: auto;
  margin: 0 auto 6px;
}

.tarjeta h1 {
  font-size: 28px;
  font-weight: 700;
  color: var(--azul-oscuro);
  margin: 0 0 24px;
  text-align: center;
}

.campo {
  margin-bottom: 16px;
}

.campo label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
}

.campo input,
.campo select {
  width: 100%;
  background-color: var(--azul-claro);
  border: 1px solid transparent;
  border-radius: 800px;
  padding: 10px 20px;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  color: var(--texto-principal);
  transition: border-color 0.2s ease;
}

.campo input:focus,
.campo select:focus {
  outline: none;
  border-color: var(--azul-primario);
  background-color: var(--blanco);
}

/* El navegador impone su propio fondo (normalmente amarillo) al autocompletar
   un campo; -webkit-box-shadow con un inset enorme es el único truco que lo
   sobrescribe de forma confiable entre navegadores basados en Chromium. */
.campo input:-webkit-autofill,
.campo input:-webkit-autofill:hover,
.campo input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px var(--azul-claro) inset;
  box-shadow: 0 0 0px 1000px var(--azul-claro) inset;
  -webkit-text-fill-color: var(--texto-principal);
}

.campo input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px var(--blanco) inset;
  box-shadow: 0 0 0px 1000px var(--blanco) inset;
}

.mensaje-error {
  font-size: 13px;
  color: var(--error);
  margin-top: 8px;
  min-height: 18px;
}

.mensaje-exito {
  font-size: 13px;
  color: var(--exito);
  margin-top: 8px;
}

/* Advertencia (PR 3b): algo que se cortó y se puede retomar, no una falla.
   Mismo ámbar que el badge "Obsoleto". */
.mensaje-advertencia {
  font-size: 13px;
  color: #8A5300;
  margin-top: 8px;
}

.btn {
  display: inline-block;
  border: none;
  border-radius: 800px;
  padding: 10px 28px;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
  text-align: center;
}

.btn-primary {
  background-color: var(--azul-primario);
  color: var(--blanco);
  width: 100%;
}

.btn-primary:hover {
  background-color: #005FA3;
}

.btn-secondary {
  background-color: var(--blanco);
  color: var(--azul-primario);
  border: 1px solid var(--azul-primario);
}

.btn-pequeno {
  width: auto;
  padding: 4px 14px;
  font-size: 13px;
}

/* `display: inline-block` de .btn anularía el atributo `hidden`. */
.btn[hidden] {
  display: none;
}

.confirmacion-inline {
  font-size: 13px;
  color: var(--texto-secundario);
  margin-right: 6px;
}

/* Estado "Deshabilitado" — PRESALUD-STANDARDS.md sección 14. Se aplica
   sobre cualquier variante de .btn (primario/secundario) para que un
   botón bloqueado se vea obviamente inactivo, no solo funcionalmente
   bloqueado. */
.btn:disabled {
  background-color: var(--azul-claro);
  color: rgba(0, 0, 0, 0.4);
  border: none;
  cursor: not-allowed;
}

.contenido {
  /* `.contenido` es un hijo flex de `.app-main` (columna). Con
     `margin: 0 auto` en vez de `margin: 0`, los márgenes automáticos en
     el eje transversal (horizontal, en una columna flex) suprimen el
     `align-items: stretch` por defecto — el elemento deja de llenar el
     ancho disponible y en cambio se encoge al ancho de SU CONTENIDO
     (shrink-to-fit) para luego centrarse. Como el contenido visible
     cambia según la pestaña activa (Cambios/Excepciones/Alertas, cada
     tabla con distinto número de columnas), el ancho de `.contenido`
     — y por lo tanto la posición de la barra de pestañas de arriba —
     saltaba entre pestañas. `margin: 0` restaura el stretch: el ancho
     queda fijo (el disponible, topado por max-width), sin depender del
     contenido. */
  max-width: 1140px;
  margin: 0;
  padding: 32px 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
}

th,
td {
  text-align: left;
  padding: 12px 16px;
  font-size: 15px;
}

thead th {
  color: var(--texto-secundario);
  font-weight: 700;
  border-bottom: 1px solid var(--azul-claro);
}

tbody tr {
  border-bottom: 1px solid var(--azul-claro);
}

.chip-rol {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 800px;
  font-size: 13px;
  font-weight: 500;
  background-color: var(--azul-claro);
  color: var(--azul-oscuro);
}

.formulario-alta {
  background: var(--blanco);
  border: 1px solid var(--azul-claro);
  box-shadow: 0 2px 12px rgba(0, 59, 111, 0.06);
  border-radius: 16px;
  padding: 24px;
  margin-top: 24px;
  max-width: 480px;
}

.formulario-alta h2 {
  margin-top: 0;
  color: var(--azul-oscuro);
}

.grid-procesos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 24px;
}

.tarjeta-proceso {
  background: var(--blanco);
  border: 1px solid var(--azul-claro);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 59, 111, 0.06);
}

.tarjeta-proceso h2 {
  margin-top: 0;
  color: var(--azul-oscuro);
}

.aviso-inicial {
  font-size: 13px;
  font-weight: 500;
  color: var(--azul-primario);
  margin: -4px 0 12px;
}

.aviso-inicial-inline {
  font-size: 12px;
  color: var(--azul-primario);
  font-weight: 500;
}

.checkbox-linea {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 15px;
}

.checkbox-linea input {
  width: auto;
}

.estado-proceso {
  margin-top: 16px;
  padding: 16px;
  border-radius: 12px;
  background-color: var(--azul-claro);
}

.estado-proceso p {
  margin: 4px 0;
  font-size: 14px;
}

.estado-proceso .acciones {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.estado-proceso .acciones .btn {
  width: auto;
}

/* --- Procesos en segundo plano (PR 3a) --- */

/* Alerta de relación que no se podrá crear (sin costo usable en el catálogo). */
.texto-sin-relacion {
  font-size: 12px;
  color: var(--error);
}

.resultado-cambios {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--texto-secundario);
}

.aviso-candado {
  margin: 0 0 20px;
  padding: 16px 20px;
  border-radius: 12px;
  background-color: var(--azul-claro);
  border-left: 4px solid var(--azul-primario);
}

.aviso-candado[hidden] {
  display: none;
}

.aviso-candado p {
  margin: 4px 0;
  font-size: 14px;
}

.aviso-candado .acciones {
  margin-top: 12px;
}

.aviso-candado .acciones .btn {
  width: auto;
}

.nota-candado {
  font-size: 13px;
  color: var(--texto-secundario);
}

.barra-avance {
  display: block;
  width: 100%;
  max-width: 480px;
  height: 8px;
  margin: 8px 0;
  border: none;
  border-radius: 999px;
  background-color: var(--blanco);
  overflow: hidden;
  appearance: none;
}

.barra-avance::-webkit-progress-bar {
  background-color: var(--blanco);
  border-radius: 999px;
}

.barra-avance::-webkit-progress-value {
  background-color: var(--azul-primario);
  border-radius: 999px;
}

.barra-avance::-moz-progress-bar {
  background-color: var(--azul-primario);
  border-radius: 999px;
}

/* Ícono girando para operaciones que tardan (p. ej. subir el catálogo de LEVIC). */
.indicador-carga {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--azul-oscuro);
  margin-top: 8px;
}

.spinner {
  flex: none;
  width: 16px;
  height: 16px;
  /* El recuadro de estado es azul claro: la pista va en blanco para que se vea. */
  border: 2px solid var(--blanco);
  border-top-color: var(--azul-primario);
  border-radius: 50%;
  animation: girar 0.8s linear infinite;
}

@keyframes girar {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2.4s; }
}

/* Sobre tarjetas blancas (vista previa), el fondo de la barra va en azul claro. */
.tarjeta-resumen .barra-avance,
.tarjeta-aprobacion .barra-avance {
  background-color: var(--azul-claro);
}

.tarjeta-resumen .barra-avance::-webkit-progress-bar,
.tarjeta-aprobacion .barra-avance::-webkit-progress-bar {
  background-color: var(--azul-claro);
}

.badge-alerta {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 800px;
  font-size: 12px;
  font-weight: 600;
  background-color: #FDECEA;
  color: var(--error);
}

.fila-tarjetas-encabezado {
  display: flex;
  gap: 20px;
  margin: 24px 0;
}

.fila-tarjetas-encabezado .tarjeta-resumen {
  flex: 1;
  margin: 0;
  min-width: 0;
}

.tarjeta-resumen {
  background: var(--blanco);
  border: 1px solid var(--azul-claro);
  box-shadow: 0 2px 12px rgba(0, 59, 111, 0.06);
  border-radius: 16px;
  padding: 20px 24px;
  margin: 24px 0;
}

.tarjeta-resumen .fila-metricas {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 8px;
}

.tarjeta-resumen .metrica {
  min-width: 120px;
}

/* Resumen de la Vista previa (pulido, PR B): productos y cambios. */
.tarjeta-resumen .titulo-resumen {
  font-size: 14px;
  font-weight: 600;
  color: var(--azul-oscuro);
  margin: 18px 0 4px;
}

.tabla-desglose {
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 6px;
}

.tabla-desglose th,
.tabla-desglose td {
  text-align: left;
  padding: 4px 16px 4px 0;
  vertical-align: top;
}

.tabla-desglose th {
  font-weight: 500;
  color: var(--texto-secundario);
  white-space: nowrap;
}

.tarjeta-resumen .metrica .valor {
  font-size: 24px;
  font-weight: 700;
  color: var(--azul-oscuro);
}

.tarjeta-resumen .metrica .etiqueta {
  font-size: 13px;
  color: var(--texto-secundario);
}

.tarjeta-aprobacion {
  background: var(--blanco);
  border: 1px solid var(--azul-claro);
  border-radius: 16px;
  padding: 20px 24px;
  margin: 0 0 24px;
  box-shadow: 0 2px 12px rgba(0, 59, 111, 0.06);
}

.tarjeta-aprobacion h2 {
  margin-top: 0;
  color: var(--azul-oscuro);
}

.tarjeta-aprobacion h3 {
  font-size: 16px;
  color: var(--azul-oscuro);
  margin-bottom: 4px;
}

.tarjeta-aprobacion .btn {
  width: auto;
}

.tarjeta-aprobacion hr {
  border: none;
  border-top: 1px solid var(--azul-claro);
  margin: 20px 0;
}

.tarjeta-aprobacion .campo {
  max-width: 320px;
}

.resultado-aprobacion {
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: 12px;
  background-color: var(--blanco);
  border: 1px solid var(--azul-claro);
}

.resultado-aprobacion p {
  margin: 4px 0;
  font-size: 14px;
}

.resultado-aprobacion ul {
  margin: 8px 0 0;
  padding-left: 20px;
  font-size: 13px;
  color: var(--texto-secundario);
}

.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--azul-claro);
  margin-bottom: 16px;
}

.tab-btn {
  border: none;
  background: none;
  padding: 10px 18px;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--texto-secundario);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.tab-btn.activo {
  color: var(--azul-primario);
  border-bottom-color: var(--azul-primario);
}

.tabla-wrap {
  overflow-x: auto;
}

.th-ordenable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.th-ordenable:hover {
  color: var(--azul-primario);
}

.th-ordenable .flecha-orden {
  font-size: 11px;
  margin-left: 4px;
}

.indicador-cambio {
  font-weight: 600;
  margin-left: 6px;
}

.indicador-cambio.subida {
  color: var(--exito);
}

.indicador-cambio.bajada {
  color: var(--error);
}

.valor-subida {
  color: var(--exito);
  font-weight: 600;
}

.valor-bajada {
  color: var(--error);
  font-weight: 600;
}

.nota-alertas {
  background: var(--azul-claro);
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 14px;
  color: var(--texto-secundario);
  margin-bottom: 16px;
}

.paginacion {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 32px;
  font-size: 14px;
}

/* Buscador y filtro de tipo arriba de cada pestaña del detalle (Vista previa
   e Historial; Fase 1 de la 8.3, punto 6). Mismo estilo pill que los campos. */
.barra-busqueda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 4px 0 12px;
}

.barra-busqueda .input-busqueda,
.barra-busqueda .select-tipo-excepcion {
  background-color: var(--azul-claro);
  border: 1px solid transparent;
  border-radius: 800px;
  padding: 8px 18px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  color: var(--texto-principal);
}

.barra-busqueda .input-busqueda {
  width: 300px;
  max-width: 100%;
}

.barra-busqueda .input-busqueda:focus,
.barra-busqueda .select-tipo-excepcion:focus {
  outline: none;
  border-color: var(--azul-primario);
  background-color: var(--blanco);
}

@media (max-width: 600px) {
  .barra-busqueda .input-busqueda,
  .barra-busqueda .select-tipo-excepcion {
    width: 100%;
  }
}

/* Nombre de Odoo con el del catálogo en el tooltip. */
.nombre-con-catalogo {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: help;
}

.paginacion .btn {
  width: auto;
  padding: 6px 16px;
  font-size: 13px;
}

.paginacion .btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

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

.fila-filtros .campo {
  margin-bottom: 0;
}

.atajos-fecha {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 16px;
}

.atajos-fecha button.activo {
  background-color: var(--azul-primario);
  border-color: var(--azul-primario);
  color: var(--blanco);
}

/* "Limpiar filtros" como una celda más de la fila de filtros, alineado
   con los campos (la fila usa align-items: end en desktop). En móvil la
   fila es una sola columna: el botón queda al final a todo el ancho. */
.campo-accion .btn {
  width: 100%;
}

/* --- Campo "Periodo" + calendario de rango (Historial, Etapa 8.1) --- */

.campo-periodo {
  position: relative;
}

.campo-periodo-boton {
  width: 100%;
  text-align: left;
  background-color: var(--azul-claro);
  border: 1px solid transparent;
  border-radius: 800px;
  padding: 10px 20px;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  color: var(--texto-principal);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.campo-periodo-boton.vacio {
  color: var(--texto-secundario);
}

.campo-periodo-boton:focus-visible,
.campo-periodo-boton[aria-expanded="true"] {
  outline: none;
  border-color: var(--azul-primario);
  background-color: var(--blanco);
}

.calendario-popup {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  width: 296px;
  max-width: calc(100vw - 32px);
  background: var(--blanco);
  border: 1px solid var(--azul-claro);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 59, 111, 0.18);
  padding: 14px;
}

.calendario-popup[hidden] {
  display: none;
}

.cal-encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.cal-titulo {
  font-size: 14px;
  font-weight: 600;
  color: var(--azul-oscuro);
}

.cal-nav {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: none;
  font-size: 20px;
  line-height: 1;
  color: var(--azul-primario);
  cursor: pointer;
}

.cal-nav:hover:not(:disabled) {
  background-color: var(--azul-claro);
}

.cal-nav:disabled {
  color: rgba(0, 0, 0, 0.2);
  cursor: not-allowed;
}

.cal-semana,
.cal-dias {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px 0;
}

.cal-semana span {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--texto-secundario);
  padding: 4px 0;
}

.cal-dia {
  height: 34px;
  border: none;
  background: none;
  border-radius: 8px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  color: var(--texto-principal);
  cursor: pointer;
}

.cal-dia:hover:not(:disabled) {
  background-color: var(--azul-claro);
}

.cal-dia.hoy {
  font-weight: 700;
  color: var(--azul-primario);
}

.cal-dia.en-rango {
  background-color: var(--azul-claro);
  border-radius: 0;
}

/* El :hover genérico de .cal-dia pesa más que .extremo; sin repetirlo
   aquí, el día bajo el cursor (extremo de la vista previa) se veía
   pálido con texto blanco, ilegible. */
.cal-dia.extremo,
.cal-dia.extremo:hover:not(:disabled) {
  background-color: var(--azul-primario);
  color: var(--blanco);
  border-radius: 8px;
}

.cal-dia:disabled {
  color: rgba(0, 0, 0, 0.25);
  cursor: not-allowed;
}

.cal-ayuda {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--texto-secundario);
}

.fila-clicable {
  cursor: pointer;
}

.fila-clicable:hover {
  background-color: var(--azul-claro);
}

@media (min-width: 768px) {
  .fila-filtros {
    grid-template-columns: repeat(4, 1fr);
    align-items: end;
  }

  .grid-procesos {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Navegación lateral + topbar (Etapa 8.1) --- */

.app-layout {
  display: flex;
  min-height: 100vh;
  font-size: 14px;
}

.sidebar {
  width: 240px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 24px 16px;
  border-right: 1px solid var(--azul-claro);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-logo {
  padding: 0 12px;
  margin-bottom: 28px;
}

.sidebar-logo img {
  max-width: 100%;
  max-height: 76px;
  width: auto;
  height: auto;
  display: block;
}

.sidebar-grupo {
  margin-bottom: 20px;
}

.sidebar-grupo-titulo {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-secundario);
  padding: 0 12px;
  margin-bottom: 8px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  margin-bottom: 2px;
  border-radius: 8px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--texto-principal);
  text-decoration: none;
}

.sidebar-link .sidebar-icono {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.sidebar-link .badge-v2 {
  margin-left: auto;
}

a.sidebar-link:hover {
  background-color: var(--azul-claro);
}

.sidebar-link.activo {
  background-color: var(--azul-claro);
  color: var(--azul-oscuro);
}

.sidebar-link.deshabilitado {
  color: rgba(0, 0, 0, 0.35);
  cursor: not-allowed;
}

.badge-v2 {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 800px;
  font-size: 10px;
  font-weight: 700;
  background-color: var(--azul-claro);
  color: var(--azul-oscuro);
}

.app-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 32px;
  border-bottom: 1px solid var(--azul-claro);
}

.topbar h1 {
  font-size: 17px;
  color: var(--azul-oscuro);
  margin: 0;
}

.topbar-usuario {
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatar {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--azul-claro);
  color: var(--azul-oscuro);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.topbar-nombre {
  font-size: 13px;
  font-weight: 500;
  color: var(--texto-principal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

.th-avatar {
  width: 1%;
}

/* --- Menú de la cuenta (avatar del header, Etapa 8.1) --- */

.topbar-usuario {
  position: relative;
}

.btn-menu-usuario {
  display: flex;
  align-items: center;
  gap: 10px;
  border: none;
  background: none;
  padding: 4px 8px 4px 4px;
  border-radius: 800px;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
}

.btn-menu-usuario:hover,
.btn-menu-usuario[aria-expanded="true"] {
  background-color: var(--azul-claro);
}

.flecha-menu {
  font-size: 11px;
  color: var(--texto-secundario);
}

.menu-usuario {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 50;
  min-width: 200px;
  background: var(--blanco);
  border: 1px solid var(--azul-claro);
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 59, 111, 0.12);
  padding: 6px;
}

.menu-usuario button {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  padding: 9px 12px;
  border-radius: 8px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--texto-principal);
  cursor: pointer;
}

.menu-usuario button:hover,
.menu-usuario button:focus-visible {
  background-color: var(--azul-claro);
  outline: none;
}

/* --- Modal compartido (Etapa 8.1) — mismo lenguaje visual que las
   tarjetas KPI: blanco, borde azul claro, sombra suave, radio 16px. --- */

.modal-fondo {
  position: fixed;
  inset: 0;
  z-index: 100;
  background-color: rgba(0, 59, 111, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal-fondo[hidden] {
  display: none;
}

.modal {
  width: 100%;
  max-width: 420px;
  background: var(--blanco);
  border: 1px solid var(--azul-claro);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 59, 111, 0.18);
  padding: 24px;
  font-size: 14px;
}

.modal h2 {
  margin: 0 0 16px;
  font-size: 18px;
  color: var(--azul-oscuro);
}

body.modal-abierto {
  overflow: hidden;
}

/* Botones de un formulario (alta/edición de usuario, modal): lado a lado,
   a su ancho natural — .btn-primary trae width: 100% por default. */
.acciones-formulario {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.acciones-formulario[hidden] {
  display: none;
}

.acciones-formulario .btn {
  width: auto;
}

/* --- Campo de contraseña con botón "mostrar" (ojo, Font Awesome) --- */

.campo-password {
  position: relative;
}

.campo-password input {
  padding-right: 48px;
}

/* "Déjala vacía para no cambiarla" no cabía completo a 15px en móvil. */
.campo-password input::placeholder {
  font-size: 13px;
}

.btn-ver-password {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: 50%;
  color: var(--texto-secundario);
  cursor: pointer;
}

.btn-ver-password:hover {
  color: var(--azul-primario);
}

.btn-ver-password .icono-fa {
  width: 18px;
  height: 18px;
}

.campo input:disabled {
  color: rgba(0, 0, 0, 0.45);
  cursor: not-allowed;
}

/* --- Tabla de Usuarios: lápiz de edición y fila en edición --- */

.btn-icono {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: 50%;
  color: var(--azul-primario);
  cursor: pointer;
}

.btn-icono:hover,
.btn-icono:focus-visible {
  background-color: var(--azul-claro);
  outline: none;
}

.btn-icono .icono-fa {
  width: 15px;
  height: 15px;
}

tbody tr.fila-seleccionada {
  background-color: var(--azul-claro);
  box-shadow: inset 3px 0 0 var(--azul-primario);
}

/* El chip de rol y el avatar comparten el fondo azul claro de la fila
   resaltada; en blanco siguen distinguiéndose. */
tbody tr.fila-seleccionada .chip-rol,
tbody tr.fila-seleccionada .avatar {
  background-color: var(--blanco);
}

/* --- Interruptor Activo/Inactivo (pantalla Usuarios, Etapa 8.1) --- */

.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}

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

.switch .switch-riel {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: var(--azul-claro);
  border-radius: 800px;
  transition: background-color 0.2s ease;
}

.switch .switch-riel::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  top: 3px;
  background-color: var(--blanco);
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.switch input:checked + .switch-riel {
  background-color: var(--exito);
}

.switch input:checked + .switch-riel::before {
  transform: translateX(18px);
}

.switch input:disabled + .switch-riel {
  cursor: not-allowed;
  opacity: 0.5;
}

/* --- Dashboard (Etapa 8.1) --- */

.kpis-subtitulo {
  font-size: 12px;
  color: var(--texto-secundario);
  margin: 0 0 10px;
}

.kpis-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}

.kpi-tarjeta {
  background: var(--blanco);
  border: 1px solid var(--azul-claro);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 2px 12px rgba(0, 59, 111, 0.06);
}

.kpi-tarjeta .valor {
  font-size: 20px;
  font-weight: 700;
  color: var(--azul-oscuro);
  margin-top: 2px;
}

.kpi-tarjeta .subvalor {
  font-size: 12px;
  color: var(--texto-secundario);
  margin-top: 2px;
}

.kpi-tarjeta .etiqueta {
  font-size: 12px;
  color: var(--texto-secundario);
}

.kpi-fecha .valor {
  font-size: 14px;
  line-height: 1.3;
}

a.kpi-tarjeta {
  display: block;
  text-decoration: none;
}

.kpi-tarjeta.alerta {
  background-color: #FDECEA;
  border-color: var(--error);
}

.kpi-tarjeta.alerta .valor,
.kpi-tarjeta.alerta .etiqueta {
  color: var(--error);
}

.contenido h2 {
  font-size: 15px;
  color: var(--azul-oscuro);
  margin: 28px 0 10px;
}

/* Títulos dentro de una tarjeta: sin el margen superior de arriba — el
   relleno de la tarjeta ya los separa del borde. Las reglas propias de
   cada tarjeta (`.tarjeta-proceso h2 { margin-top: 0 }`, etc.) no
   alcanzaban: `.contenido h2` pesa lo mismo y va después en el archivo,
   así que ganaba y sumaba 28 px de más (Historial, Usuarios, Disparar
   proceso, Vista previa). Un solo lugar para todas las tarjetas. */
.contenido :is(.tarjeta-proceso, .formulario-alta, .tarjeta-aprobacion, .tarjeta-resumen) > h2 {
  margin-top: 0;
}

/* Usuarios: los avisos de arriba de la tabla solo ocupan espacio cuando
   tienen texto (antes reservaban ~62 px vacíos). Se escriben con
   textContent = '' al limpiarse, que los deja realmente vacíos (:empty). */
#mensaje-acceso:empty,
#mensaje-accion-usuario:empty {
  display: none;
}

.badge-estado {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 800px;
  font-size: 11px;
  font-weight: 600;
  background-color: var(--azul-claro);
  color: var(--azul-oscuro);
}

.badge-estado.completada {
  background-color: #E6F4EA;
  color: var(--exito);
}

.badge-estado.alerta {
  background-color: #FDECEA;
  color: var(--error);
}

/* Propuesta que el Vo.Bo. no aplicó porque el valor en Odoo cambió
   desde la comparación — ámbar: no es un error, pero requiere atención. */
.badge-estado.obsoleto {
  background-color: #FFF4E5;
  color: #8A5300;
  cursor: help;
}

.tabla-pequena th,
.tabla-pequena td {
  font-size: 12px;
}

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

@media (max-width: 480px) {
  .kpis-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .app-layout {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    height: auto;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    border-right: none;
    border-bottom: 1px solid var(--azul-claro);
  }

  .sidebar-logo {
    margin-bottom: 0;
    margin-right: 12px;
  }

  .sidebar-logo img {
    max-height: 32px;
  }

  .sidebar-grupo {
    margin-bottom: 0;
  }

  .sidebar-grupo-titulo {
    display: none;
  }
}

/* --- Disparar proceso (PR 4) --- */

.nota-pantalla {
  font-size: 14px;
  color: var(--texto-secundario);
  margin: 0 0 16px;
}

/* Franja de estado: proceso en curso (informativa) o pendiente de Vo.Bo.
   (advertencia, mismo ámbar que el badge "Obsoleto"). */
.franja-estado {
  margin: 0 0 20px;
  padding: 16px 20px;
  border-radius: 12px;
  font-size: 14px;
}

.franja-estado[hidden] {
  display: none;
}

.franja-estado p {
  margin: 4px 0;
}

.franja-estado.informativa {
  background-color: var(--azul-claro);
  border-left: 4px solid var(--azul-primario);
}

.franja-estado.advertencia {
  background-color: #FFF4E5;
  border-left: 4px solid #E0A33A;
  color: #5C3A00;
}

.franja-estado .acciones-formulario {
  margin-top: 12px;
}

/* Tarjeta del proceso que tiene el candado. */
.tarjeta-proceso.activa {
  border: 2px solid var(--azul-primario);
}

.tarjeta-proceso {
  display: flex;
  flex-direction: column;
}

.origen-catalogo {
  font-size: 13px;
  color: var(--texto-secundario);
  margin: -4px 0 10px;
}

.carga-hoy {
  font-size: 13px;
  font-weight: 500;
  color: var(--azul-primario);
  margin: 0 0 10px;
}

.carga-hoy.sin-carga {
  color: var(--texto-secundario);
  font-weight: 400;
}

.subida-levic {
  margin-bottom: 12px;
}

.subida-levic > .btn {
  width: auto;
}

.subida-levic .form-carga-inline {
  margin-top: 10px;
}

.en-vivo {
  margin: 4px 0 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background-color: var(--azul-claro);
  font-size: 14px;
}

.en-vivo p {
  margin: 4px 0;
}

.ultima-ejecucion {
  border-top: 1px solid var(--azul-claro);
  padding-top: 10px;
  margin-top: 4px;
  font-size: 13px;
}

.ultima-ejecucion p {
  margin: 3px 0;
}

.etiqueta-bloque {
  font-size: 12px;
  font-weight: 600;
  color: var(--azul-oscuro);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
}

.enlace-historial {
  display: inline-block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--azul-primario);
  font-weight: 500;
}

.ultima-aplicada {
  font-size: 13px;
  color: var(--texto-secundario);
  margin: 6px 0 0;
}

.nota-tarjeta {
  font-size: 13px;
  color: var(--texto-secundario);
  border-top: 1px solid var(--azul-claro);
  padding-top: 10px;
  margin: 4px 0 0;
}

/* El botón queda al pie de la tarjeta aunque su contenido sea más corto. */
.acciones-tarjeta {
  margin-top: auto;
  padding-top: 14px;
}

.acciones-tarjeta .btn {
  width: auto;
}

/* Modal de confirmación compartido (PR 4). */
.modal.modal-confirmacion {
  max-width: 480px;
}

.modal-cuerpo p {
  margin: 6px 0;
}

.modal-acciones {
  margin-top: 18px;
  justify-content: flex-end;
}

.bloque-modal {
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 10px;
  background-color: #F4F6F8;
}

.opcion-radio {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 6px 0;
  font-size: 14px;
  cursor: pointer;
}

.opcion-radio input {
  width: auto;
  margin-top: 3px;
}

.btn.btn-peligro {
  background-color: var(--error);
}

/* Pendiente de Vo.Bo. o aprobación interrumpida: falta algo, pero no es un error. */
.badge-estado.advertencia {
  background-color: #FFF4E5;
  color: #8A5300;
}

/* Un enlace con aspecto de botón (p. ej. "Ir a la vista previa") no se subraya. */
a.btn {
  text-decoration: none;
  text-align: center;
}

/* --- Ajustes (8.1) --- */

#contenido-ajustes .tarjeta-proceso {
  margin-bottom: 20px;
}

.campo-ajuste {
  margin-bottom: 18px;
  max-width: 520px;
}

.entrada-con-unidad {
  display: flex;
  align-items: center;
  gap: 8px;
}

.entrada-con-unidad input {
  width: 140px;
}

.entrada-con-unidad span {
  font-size: 14px;
  color: var(--texto-secundario);
}

.ayuda-ajuste {
  font-size: 13px;
  color: var(--texto-secundario);
  margin: 6px 0 2px;
}

.vigencia-ajuste {
  font-size: 12px;
  color: var(--texto-secundario);
  margin: 2px 0 0;
}

.fila-relacion {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--azul-claro);
  font-size: 14px;
}

.proveedor-relacion {
  font-weight: 600;
  color: var(--azul-oscuro);
}

.lista-cambios {
  margin: 8px 0;
  padding-left: 18px;
}

.lista-cambios li {
  margin: 6px 0;
}

@media (max-width: 480px) {
  .fila-relacion {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}