/* CRM AORA · hoja de estilos.
 *
 * Estética limpia: fondo blanco, grises neutros y el petróleo de la marca (547 C, #00313C)
 * para texto principal y acciones. El cian (Pantone 310 C, #6AD1E3) queda solo como acento
 * fino (indicador de la opción activa, foco). Manual de estilo AORA v3: Montserrat como
 * tipografía de texto.
 *
 * Segmentos A-D: rampa ordinal de un solo tono validada (skill dataviz, --ordinal, sobre
 * blanco): D #6fb9c8 → A #00313c. "Sin segmentar" sin relleno.
 */

@font-face {
  font-family: "Montserrat";
  src: url("fuentes/montserrat-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fuentes/montserrat-latin-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Marca */
  --aora-petroleo: #00313c;
  --aora-petroleo-2: #0b4552;
  --aora-cian: #6ad1e3;
  --aora-magenta: #c6007e;

  /* Neutros */
  --tinta: #1c2a2f;          /* texto principal */
  --tinta-2: #55636a;        /* texto secundario */
  --tinta-3: #8a969b;        /* texto terciario, iconos */
  --linea: #e7eaec;          /* bordes y separadores */
  --linea-2: #f1f3f4;        /* separadores suaves */
  --fondo: #ffffff;
  --fondo-2: #f7f8f9;        /* hover, zonas secundarias */
  --activo: #eef3f4;         /* fondo de elemento seleccionado */

  /* Segmentos (rampa ordinal validada) */
  --seg-A: #00313c;
  --seg-B: #1a5f6e;
  --seg-C: #3a8fa1;
  --seg-D: #6fb9c8;

  --radio: 10px;
  --lateral-ancho: 244px;
  --fuente: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Bootstrap */
  --bs-body-font-family: var(--fuente);
  --bs-body-font-size: .925rem;
  --bs-body-color: var(--tinta);
  --bs-body-bg: var(--fondo);
  --bs-emphasis-color: var(--tinta);
  --bs-secondary-color: var(--tinta-2);
  --bs-primary: var(--aora-petroleo);
  --bs-primary-rgb: 0, 49, 60;
  --bs-link-color: var(--aora-petroleo);
  --bs-link-color-rgb: 0, 49, 60;
  --bs-link-hover-color: var(--aora-petroleo-2);
  --bs-link-hover-color-rgb: 11, 69, 82;
  --bs-border-color: var(--linea);
  --bs-border-radius: 8px;
  --bs-border-radius-lg: var(--radio);
  --bs-focus-ring-color: rgba(106, 209, 227, .45);
}

body { -webkit-font-smoothing: antialiased; background: var(--fondo); }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, h5, h6, .h4, .h5, .h6 { color: var(--tinta); font-weight: 600; }
.text-secondary { color: var(--tinta-2) !important; }
.text-magenta { color: var(--aora-magenta); }
.min-w-0 { min-width: 0; }
::selection { background: #d8f2f7; }

/* --- Estructura: menú lateral + principal ------------------------------------------------- */
.app { display: flex; min-height: 100vh; }
.principal { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.contenido { padding: 1.5rem 2rem 3rem; max-width: 1200px; width: 100%; }
.app-anonima .contenido { max-width: 640px; margin: 0 auto; }

.lateral {
  width: var(--lateral-ancho);
  background: var(--fondo);
  border-right: 1px solid var(--linea);
  display: flex; flex-direction: column;
}
@media (min-width: 992px) {
  .lateral { position: sticky; top: 0; height: 100vh; flex: 0 0 var(--lateral-ancho); }
}
.lateral-marca { display: flex; align-items: center; padding: 1.25rem 1.25rem 1rem; }
.lateral-logo { height: 26px; width: auto; }
.lateral-producto { font-size: .72rem; font-weight: 600; letter-spacing: .14em; color: var(--tinta-3); padding-left: .55rem; border-left: 1px solid var(--linea); }
.lateral-nav { padding: .25rem .75rem; flex: 1 1 auto; overflow-y: auto; }
.lateral-item {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .75rem; margin: 1px 0;
  border-radius: 8px; border: 0; background: none;
  color: var(--tinta-2); font-weight: 500; text-align: left;
  position: relative;
}
.lateral-item:hover { background: var(--fondo-2); color: var(--tinta); text-decoration: none; }
.lateral-item.activo { background: var(--activo); color: var(--aora-petroleo); font-weight: 600; }
.lateral-item.activo::before {
  content: ""; position: absolute; left: -.75rem; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--aora-cian);
}
.lateral-item .icono { flex: 0 0 auto; color: var(--tinta-3); }
.lateral-item.activo .icono { color: var(--aora-petroleo); }
.lateral-item-sm { font-size: .85rem; padding: .45rem .75rem; }
.lateral-pie { border-top: 1px solid var(--linea); padding: .75rem; }
.lateral-usuario { display: flex; align-items: center; gap: .6rem; padding: .25rem .5rem .6rem; font-size: .85rem; }

/* --- Cabecera: barra móvil + pestañas -------------------------------------------------- */
.cabecera { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .96); backdrop-filter: blur(6px); border-bottom: 1px solid var(--linea); }
.cabecera-movil { display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem; }
.cabecera-logo { height: 22px; width: auto; }
.cabecera-seccion { font-weight: 600; color: var(--tinta-2); font-size: .9rem; border-left: 1px solid var(--linea); padding-left: .75rem; }
.btn-menu { border: 0; background: none; padding: .25rem; color: var(--tinta); line-height: 1; }
.pestanas { display: flex; gap: .25rem; padding: 0 2rem; overflow-x: auto; scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }
.pestana {
  padding: .85rem .9rem .75rem; white-space: nowrap;
  color: var(--tinta-2); font-weight: 500; font-size: .9rem;
  border-bottom: 2px solid transparent;
}
.pestana:hover { color: var(--tinta); text-decoration: none; }
.pestana.activa { color: var(--aora-petroleo); font-weight: 600; border-bottom-color: var(--aora-petroleo); }
@media (max-width: 991.98px) {
  .contenido { padding: 1rem 1rem 3rem; }
  .pestanas { padding: 0 .5rem; }
  .pestana { padding: .6rem .7rem .55rem; }
}

/* --- Encabezado de página y bloques ---------------------------------------------------------- */
.cabecera-pagina { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.cabecera-pagina h1 { font-size: 1.45rem; margin: 0; }
.subtitulo { color: var(--tinta-2); margin: .2rem 0 0; font-size: .875rem; }
.bloque { border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.1rem 1.25rem; background: var(--fondo); }
.bloque-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.bloque-titulo h2, .titulo-seccion {
  font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta-2); margin: 0 0 .75rem;
}
.bloque-titulo h2 { margin: 0; }
.bloque-titulo a { font-size: .85rem; }
.vacio { color: var(--tinta-3); font-size: .9rem; padding: .25rem 0; }
.card { --bs-card-bg: var(--fondo); --bs-card-border-color: var(--linea); --bs-card-border-radius: var(--radio); --bs-card-inner-border-radius: calc(var(--radio) - 1px); box-shadow: none; }
.card-footer { background: var(--fondo) !important; border-top-color: var(--linea-2); }

/* --- KPIs ------------------------------------------------------------------------------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: .75rem; }
.kpis-3 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.kpi {
  display: flex; flex-direction: column; gap: .15rem;
  border: 1px solid var(--linea); border-radius: var(--radio); padding: .9rem 1rem;
  color: var(--tinta); background: var(--fondo);
}
a.kpi:hover { border-color: #cfd6d9; text-decoration: none; background: var(--fondo-2); }
.kpi-etq { font-size: .78rem; color: var(--tinta-2); font-weight: 500; }
.kpi-valor { font-size: 1.75rem; font-weight: 600; line-height: 1.15; color: var(--aora-petroleo); font-variant-numeric: tabular-nums; }
.kpi-valor small { font-size: .55em; font-weight: 600; margin-left: .1em; color: var(--tinta-2); }
.kpi-nota { font-size: .75rem; color: var(--tinta-3); }
/* Tarjetas de los cuadros de mando (mismo estilo que .kpi) */
.tile { border: 1px solid var(--linea); border-radius: var(--radio); padding: .9rem 1rem; height: 100%; display: flex; flex-direction: column; gap: .15rem; background: var(--fondo); }
.tile-num { font-size: 1.75rem; font-weight: 600; line-height: 1.15; color: var(--aora-petroleo); order: 2; font-variant-numeric: tabular-nums; }
.tile-txt { font-size: .78rem; color: var(--tinta-2); font-weight: 500; order: 1; }
.tile-sub { font-size: .75rem; color: var(--tinta-3); order: 3; }
.tile-aviso { border-style: dashed; }

/* --- Avisos -------------------------------------------------------------------------------- */
.avisos { list-style: none; padding: 0; margin: 0 0 1.5rem; border: 1px solid var(--linea); border-radius: var(--radio); }
.avisos li { padding: .6rem 1rem; font-size: .9rem; position: relative; padding-left: 1.75rem; }
.avisos li + li { border-top: 1px solid var(--linea-2); }
.avisos li::before { content: ""; position: absolute; left: .85rem; top: 1.05rem; width: 6px; height: 6px; border-radius: 50%; background: var(--tinta-3); }
.avisos li.aviso-fuerte::before { background: var(--aora-magenta); }
.alert { border-radius: var(--radio); border: 1px solid var(--linea); border-left-width: 3px; background: var(--fondo); color: var(--tinta); }
.alert-info, .alert-success { border-left-color: var(--aora-petroleo); }
.alert-warning { border-left-color: #b8860b; }
.alert-danger { border-left-color: var(--aora-magenta); }

/* --- Tablas y listas ---------------------------------------------------------------------- */
.tabla-card { border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.tabla, .table { --bs-table-bg: transparent; --bs-table-border-color: var(--linea-2); font-size: .9rem; }
.tabla thead th, .table thead th { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); border-bottom: 1px solid var(--linea); padding-top: .6rem; padding-bottom: .6rem; }
.tabla-card .tabla th:first-child, .tabla-card .tabla td:first-child { padding-left: 1rem; }
.tabla-card .tabla th:last-child, .tabla-card .tabla td:last-child { padding-right: 1rem; }
.tabla tbody tr:hover { background: var(--fondo-2); }
.num-alerta { color: var(--aora-magenta); font-weight: 600; }
.lista { list-style: none; padding: 0; margin: 0; }
.lista li { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; }
.lista li + li { border-top: 1px solid var(--linea-2); }
.fecha-acc { flex: 0 0 4.2rem; font-size: .78rem; font-weight: 600; color: var(--tinta-2); text-transform: capitalize; }
.fecha-acc.hoy { color: var(--aora-petroleo); }
.fecha-acc.vencida { color: var(--aora-magenta); }
.lista-personas { list-style: none; padding: 0; margin: 0; }
.lista-personas li { padding: .65rem 0; }
.lista-personas li + li { border-top: 1px solid var(--linea-2); }
.lista-cuentas { list-style: none; margin: 0; padding: 0; }
.lista-cuentas li + li { border-top: 1px solid var(--linea-2); }
.lista-cuentas li > a, .lista-cuentas li > label { padding: .75rem 1rem; color: inherit; cursor: pointer; }
.lista-cuentas li > a:hover, .lista-cuentas li > label:hover { background: var(--fondo-2); text-decoration: none; }
.chevron { color: var(--tinta-3); font-size: 1.4rem; line-height: 1; }
dl.ficha { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.25rem; margin: 0; }
dl.ficha dt { font-weight: 500; font-size: .78rem; color: var(--tinta-2); padding-top: .1rem; }
dl.ficha dd { margin: 0; word-break: break-word; }

/* --- Botones y formularios -------------------------------------------------------------- */
.btn { font-weight: 500; border-radius: 8px; }
.btn-primary {
  --bs-btn-bg: var(--aora-petroleo); --bs-btn-border-color: var(--aora-petroleo);
  --bs-btn-hover-bg: var(--aora-petroleo-2); --bs-btn-hover-border-color: var(--aora-petroleo-2);
  --bs-btn-active-bg: var(--aora-petroleo-2); --bs-btn-active-border-color: var(--aora-petroleo-2);
  --bs-btn-disabled-bg: var(--aora-petroleo); --bs-btn-disabled-border-color: var(--aora-petroleo);
  --bs-btn-focus-shadow-rgb: 106, 209, 227;
}
/* Antiguo botón cian: ahora es el principal */
.btn-aora { --bs-btn-color: #fff; --bs-btn-bg: var(--aora-petroleo); --bs-btn-border-color: var(--aora-petroleo); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--aora-petroleo-2); --bs-btn-hover-border-color: var(--aora-petroleo-2); --bs-btn-active-bg: var(--aora-petroleo-2); --bs-btn-focus-shadow-rgb: 106, 209, 227; }
.btn-outline-primary, .btn-outline-secondary {
  --bs-btn-color: var(--tinta); --bs-btn-border-color: #d3d9dc; --bs-btn-bg: #fff;
  --bs-btn-hover-color: var(--tinta); --bs-btn-hover-bg: var(--fondo-2); --bs-btn-hover-border-color: #c3cbcf;
  --bs-btn-active-color: var(--tinta); --bs-btn-active-bg: var(--activo); --bs-btn-active-border-color: #c3cbcf;
  --bs-btn-focus-shadow-rgb: 106, 209, 227;
}
.btn-link { --bs-btn-color: var(--tinta-2); --bs-btn-hover-color: var(--tinta); }
.btn-crm { min-height: 46px; font-size: 1rem; }
.form-control, .form-select { background-color: #fff; border-color: #d9dfe2; }
.form-control:focus, .form-select:focus { border-color: var(--aora-cian); box-shadow: 0 0 0 .2rem rgba(106, 209, 227, .25); }
.form-label { font-weight: 500; font-size: .85rem; color: var(--tinta-2); }
.form-check-input:checked { background-color: var(--aora-petroleo); border-color: var(--aora-petroleo); }
details > summary { cursor: pointer; color: var(--tinta-2); }
.bg-cian-50 { background: var(--fondo-2); }

/* Chips (opciones de radio/checkbox) */
.chips .chip, .chips-col .chip {
  display: inline-flex; align-items: center; gap: .45rem;
  border: 1px solid #d9dfe2; border-radius: 8px; padding: .45rem .85rem;
  cursor: pointer; font-weight: 500; background: #fff; color: var(--tinta);
}
.chips .chip:hover { border-color: #c3cbcf; }
.chips .chip input, .chips-col .chip input { margin: 0; accent-color: var(--aora-petroleo); }
.chips .chip:has(input:checked), .chips-col .chip:has(input:checked) { border-color: var(--aora-petroleo); background: var(--activo); color: var(--aora-petroleo); }
.chips-col { display: flex; flex-direction: column; gap: .4rem; }
.chips-grandes { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips-grandes .chip { padding: .65rem 1rem; }

/* --- Etiquetas y segmentos -------------------------------------------------------------- */
.etq {
  display: inline-block; font-size: .72rem; font-weight: 500; line-height: 1;
  padding: .32em .6em; border-radius: 6px; vertical-align: middle;
  background: var(--linea-2); color: var(--tinta-2);
}
/* Las variantes de color antiguas pasan a neutras; solo la alerta conserva color. */
.etq-cian, .etq-violeta { background: var(--activo); color: var(--aora-petroleo); }
.etq-contorno { background: transparent; box-shadow: inset 0 0 0 1px var(--linea); }
.etq-magenta, .etq-alerta { background: #fbeef5; color: #a3006a; }

.seg {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 1.7em; height: 1.7em; border-radius: 6px;
  font-weight: 600; font-size: .78rem; color: #fff;
}
.seg-A { background: var(--seg-A); }
.seg-B { background: var(--seg-B); }
.seg-C { background: var(--seg-C); }
.seg-D { background: var(--seg-D); color: var(--aora-petroleo); }
.seg-S { background: transparent; color: var(--tinta-3); box-shadow: inset 0 0 0 1.5px #c9d1d4; }
.seg-lg { width: 2.4em; height: 2.4em; font-size: 1rem; border-radius: 8px; }

.avatar {
  flex: 0 0 auto; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: .8rem; color: var(--aora-petroleo); background: var(--activo);
}

/* --- Gráficos (barras y barras apiladas) ------------------------------------------------- */
.barras { list-style: none; padding: 0; margin: 0; }
.barras li { display: grid; grid-template-columns: minmax(7rem, 38%) 1fr 2.5rem; align-items: center; gap: .6rem; padding: .3rem 0; font-size: .85rem; }
.barra-pista { height: 10px; }
.barra { display: block; height: 100%; min-width: 2px; background: var(--seg-B); border-radius: 0 4px 4px 0; }
.barras li:hover .barra { background: var(--seg-A); }
.barra-num { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.leyenda-seg { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; font-size: .8rem; color: var(--tinta-2); }
.leyenda-seg strong { color: var(--tinta); font-weight: 600; margin-left: .15rem; }
.muestra { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; }
.muestra-A, .tramo-A { background: var(--seg-A); }
.muestra-B, .tramo-B { background: var(--seg-B); }
.muestra-C, .tramo-C { background: var(--seg-C); }
.muestra-D, .tramo-D { background: var(--seg-D); color: var(--aora-petroleo) !important; }
.muestra-S, .tramo-S { background: #fff; box-shadow: inset 0 0 0 1.5px #c9d1d4; color: var(--tinta-3) !important; }
.apilada-fila { display: grid; grid-template-columns: 3.6rem 1fr; align-items: center; gap: .6rem; margin-bottom: .45rem; }
.apilada-mes { font-size: .8rem; color: var(--tinta-2); text-transform: capitalize; }
.apilada { display: flex; gap: 2px; height: 22px; }
.apilada-grande { height: 14px; }
.tramo { display: flex; align-items: center; justify-content: center; min-width: 3px; font-size: .72rem; font-weight: 600; color: #fff; overflow: hidden; }
.tramo:first-child { border-radius: 4px 0 0 4px; }
.tramo:last-child { border-radius: 0 4px 4px 0; }
.tramo:only-child { border-radius: 4px; }
.tramo:hover { filter: brightness(1.15); }
.eje { display: grid; grid-template-columns: 5.5rem 1fr 1.6rem; align-items: center; gap: .6rem; font-size: .82rem; }
.eje + .eje { margin-top: .35rem; }
.eje > span:first-child { color: var(--tinta-2); font-weight: 500; }
.eje strong { text-align: right; }
.eje-barra { position: relative; height: 6px; border-radius: 999px; background: var(--linea-2); }
.eje-barra > span { display: block; height: 100%; border-radius: 999px; background: var(--aora-petroleo); transition: width .2s; }
.eje-barra > i { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--tinta-3); }
.previa { position: sticky; top: 56px; z-index: 4; }

/* --- Ficha, reporte y radar -------------------------------------------------------------- */
.minuto-oro { background: var(--fondo); }
.sugerencias { padding-left: 1.1rem; font-size: .9rem; }
.sugerencias li { margin-bottom: .25rem; }
.sugerencias li::marker { color: var(--tinta-3); }
.border-magenta { border-left: 3px solid var(--aora-magenta) !important; }
.border-cian { border-left: 3px solid var(--aora-petroleo) !important; }
.kpi-mini { border: 1px solid var(--linea); border-radius: 8px; padding: .6rem .3rem; }
.kpi-mini strong { display: block; font-size: 1.3rem; line-height: 1.1; }
.kpi-mini span { font-size: .72rem; color: var(--tinta-2); }
.dup-opcion { border: 1px solid var(--linea); border-radius: 8px; padding: .75rem; }
.barra-accion { position: sticky; top: 56px; z-index: 5; }
.filtros-cuadro .form-label { color: var(--tinta-2); }
.crm-pills { display: none !important; } /* sustituidas por las pestañas superiores */

.minimapa { height: 240px; border-radius: 8px; border: 1px solid var(--linea); z-index: 0; }
.minimapa-alto { height: 340px; }
.leaflet-container { font-family: var(--fuente); }
.pin {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  font-size: .78rem; font-weight: 600; line-height: 1; flex: 0 0 auto;
  box-shadow: 0 1px 3px rgba(0, 49, 60, .3);
}
.pin-centro { background: var(--aora-petroleo); border: 3px solid #fff; }
.pin-farmacia { background: #fff; color: var(--aora-petroleo); border: 2px solid var(--seg-C); }
.pin-cliente { background: var(--seg-C); color: #fff; border-color: #fff; }
.pin-principal { width: 30px; height: 30px; border: 3px solid var(--aora-petroleo); }
.pin-grande { width: 2.4em; height: 2.4em; }
.radar-lista { list-style: none; padding: 0; margin: .75rem 0 0; }
.radar-lista li { display: flex; align-items: center; gap: .75rem; padding: .5rem 0; }
.radar-lista li + li { border-top: 1px solid var(--linea-2); }
details.card > summary { list-style: none; cursor: pointer; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::after { content: " ▾"; color: var(--tinta-3); }

/* --- Acceso (login, no autorizado): blanco y limpio ------------------------------------- */
.crm-acceso { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem 1rem; background: var(--fondo-2); }
.crm-login { width: 100%; max-width: 380px; background: #fff; border: 1px solid var(--linea); border-radius: 14px; padding: 2.25rem 1.75rem 1.75rem; }
.crm-login .logo-claim { text-align: center; margin-bottom: 1.5rem; }
.crm-login .logo-claim img { width: 150px; height: auto; }
.crm-login .claim { display: block; margin-top: .35rem; color: var(--tinta-2); font-size: .9rem; letter-spacing: .06em; }
.crm-login .producto { text-align: center; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 1.25rem; }
.btn-google { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; }
.btn-google svg { width: 20px; height: 20px; background: #fff; border-radius: 50%; padding: 2px; }
.crm-login hr { border-color: var(--linea); opacity: 1; }

/* Selector segmentado para filtros dentro de una página */
.conmutador { display: inline-flex; list-style: none; padding: 3px; margin: 0; border: 1px solid var(--linea); border-radius: 9px; background: var(--fondo-2); gap: 2px; flex-wrap: wrap; }
.conmutador .nav-link { display: block; padding: .35rem .85rem; border-radius: 7px; color: var(--tinta-2); font-weight: 500; font-size: .85rem; }
.conmutador .nav-link:hover { color: var(--tinta); text-decoration: none; }
.conmutador .nav-link.active { background: #fff; color: var(--aora-petroleo); font-weight: 600; box-shadow: 0 0 0 1px var(--linea); }

/* ===========================================================================================
 * Branding AORA sobre la base limpia (Manual de estilo v3):
 * - logo y claim en el azul de marca (Pantone 310 C) sobre blanco (§2.5, §3.1);
 * - el azul como acento: opción activa, pestañas, filete bajo los títulos (como en el manual);
 * - las circunferencias del símbolo como elemento gráfico de fondo (§5.3).
 * El azul nunca se usa para texto sobre blanco (no llega a 2:1); el texto sigue en petróleo.
 * =========================================================================================== */
:root {
  --cian-50: #f2fbfd;
  --cian-100: #e1f6fa;
  --cian-200: #c3edf5;
  --activo: var(--cian-50);
}

/* Menú lateral */
.lateral { position: relative; overflow: hidden; }
.lateral::before, .lateral::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
}
.lateral::before { width: 300px; height: 300px; left: -150px; bottom: -110px; border: 1.5px solid var(--cian-200); }
.lateral::after { width: 150px; height: 150px; left: -75px; bottom: -35px; border: 1.5px solid var(--cian-100); }
.lateral > * { position: relative; z-index: 1; }
.lateral-marca { padding: 1.5rem 1.25rem 1.25rem; align-items: flex-start; }
.lateral-logo-enlace { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; text-decoration: none !important; }
.lateral-logo { height: 34px; }
.lateral-claim { font-size: .74rem; letter-spacing: .08em; color: var(--tinta-2); padding-left: 2px; }
.lateral-item:hover { background: var(--cian-50); }
.lateral-item.activo { background: var(--cian-100); color: var(--aora-petroleo); }
.lateral-item.activo::before { width: 4px; background: var(--aora-cian); }
.lateral-crm { margin: 0 1.25rem .9rem; font-size: .72rem; color: var(--tinta-3); }
.lateral-crm span { display: inline-block; font-weight: 700; letter-spacing: .16em; color: var(--aora-petroleo); margin-right: .25rem; }
.lateral-pie { background: rgba(255, 255, 255, .85); }
.avatar { background: var(--cian-100); color: var(--aora-petroleo); box-shadow: inset 0 0 0 1.5px var(--aora-cian); }

/* Cabecera y pestañas */
.cabecera-logo { height: 26px; }
.cabecera { border-bottom-color: var(--linea); }
.pestana:hover { color: var(--aora-petroleo); }
.pestana.activa { border-bottom: 3px solid var(--aora-cian); padding-bottom: calc(.75rem - 1px); }

/* Títulos con el filete azul del manual */
.cabecera-pagina h1 { position: relative; padding-bottom: .55rem; color: var(--aora-petroleo); }
.cabecera-pagina h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 4px; border-radius: 2px; background: var(--aora-cian); }
.bloque-titulo h2, .titulo-seccion { color: var(--aora-petroleo); display: inline-flex; align-items: center; gap: .5rem; }
.bloque-titulo h2::before, .titulo-seccion::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 2px solid var(--aora-cian); flex: 0 0 auto; }

/* Indicadores y bloques */
.kpi, .tile { box-shadow: inset 0 3px 0 var(--aora-cian); }
a.kpi:hover { border-color: var(--cian-200); background: var(--cian-50); }
.bloque, .card, .tabla-card, .avisos { border-color: var(--linea); }
.tabla tbody tr:hover, .lista-cuentas li > a:hover, .lista-cuentas li > label:hover { background: var(--cian-50); }

/* Formularios y chips */
.chips .chip:has(input:checked), .chips-col .chip:has(input:checked) { background: var(--cian-50); border-color: var(--aora-petroleo); }
.conmutador { background: var(--cian-50); border-color: var(--cian-100); }
.etq-cian, .etq-violeta { background: var(--cian-100); color: var(--aora-petroleo); }
.alert-info, .alert-success { border-left-color: var(--aora-cian); }

/* Pantallas de acceso: blanco con las circunferencias del símbolo */
.crm-acceso { background: #fff; position: relative; overflow: hidden; }
.crm-acceso::before, .crm-acceso::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.crm-acceso::before { width: 110vmax; height: 110vmax; left: -55vmax; bottom: -70vmax; border: 2px solid var(--cian-200); }
.crm-acceso::after { width: 55vmax; height: 55vmax; left: -27.5vmax; bottom: -42vmax; border: 2px solid var(--cian-100); }
.crm-login { position: relative; z-index: 1; border-top: 4px solid var(--aora-cian); box-shadow: 0 12px 32px rgba(0, 49, 60, .06); }
.crm-login .claim { color: var(--tinta-2); }