/* =========================================================================
   CRM O2 Bajo Presión
   Paleta de sala hiperbárica: petróleo profundo, agua a presión, papel frío.
   El ámbar está reservado a lo vencido. Si algo más se pone ámbar, deja de
   alarmar lo que importa.
   ========================================================================= */

:root {
  /* color */
  --tinta:      #08262C;   /* fondo profundo, cabecera, lateral */
  --tinta-alta: #0F3A42;   /* elevación sobre tinta */
  --presion:    #0E6E7A;   /* acción principal */
  --oxigeno:    #4FC3C7;   /* acento, con moderación */
  --papel:      #F4F7F7;   /* fondo de contenido */
  --superficie: #FFFFFF;
  --texto:      #10262B;
  --texto-tenue:#5B7379;
  --borde:      #DDE7E8;
  --ambar:      #B4671E;   /* SOLO vencido */
  --ambar-suave:#FDF1E3;

  /* tipografía */
  --fuente: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif:  'Instrument Serif', Georgia, serif;

  /* escala */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 32px; --e7: 48px;

  --radio: 10px;
  --toque: 44px;               /* área táctil mínima */
  --lateral: 232px;
  --sombra: 0 1px 2px rgba(8,38,44,.06), 0 4px 16px rgba(8,38,44,.05);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3 { margin: 0; line-height: 1.2; letter-spacing: -0.015em; font-weight: 600; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.0625rem; }
p  { margin: 0; }

a { color: var(--presion); }

:focus-visible {
  outline: 2px solid var(--oxigeno);
  outline-offset: 2px;
  border-radius: 4px;
}

.saltar {
  position: absolute; left: -9999px;
  background: var(--superficie); padding: var(--e3); z-index: 100;
}
.saltar:focus { left: var(--e3); top: var(--e3); }

/* ---------------------------------------------------------------- acceso */

.pantalla-acceso {
  background:
    radial-gradient(120% 90% at 50% -10%, var(--tinta-alta) 0%, var(--tinta) 62%);
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: var(--e5);
  color: #E7F1F2;
}

.acceso { width: 100%; max-width: 360px; text-align: center; }

/* El manómetro: el elemento firma. Aparece solo aquí. */
.manometro { width: 108px; margin: 0 auto var(--e5); }
.manometro svg { width: 100%; height: auto; overflow: visible; }
.manometro .aro-fondo   { fill: none; stroke: rgba(79,195,199,.16); stroke-width: 3; }
.manometro .aro-presion {
  fill: none; stroke: var(--oxigeno); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 327; stroke-dashoffset: 327;
  transform: rotate(-90deg); transform-origin: 60px 60px;
  animation: presurizar 1.5s cubic-bezier(.22,.9,.25,1) .15s forwards;
}
.manometro .marcas line { stroke: rgba(231,241,242,.35); }
.manometro .nucleo { fill: var(--oxigeno); }
.manometro .aguja {
  stroke: #E7F1F2; stroke-width: 2.5; stroke-linecap: round;
  transform-origin: 60px 60px;
  animation: barrer 1.5s cubic-bezier(.22,.9,.25,1) .15s forwards;
}

@keyframes presurizar { to { stroke-dashoffset: 82; } }
@keyframes barrer     { from { transform: rotate(-125deg); } to { transform: rotate(56deg); } }

@media (prefers-reduced-motion: reduce) {
  .manometro .aro-presion { animation: none; stroke-dashoffset: 82; }
  .manometro .aguja       { animation: none; transform: rotate(56deg); }
}

.logotipo {
  font-family: var(--serif);
  font-size: 2.125rem; font-weight: 400; letter-spacing: -0.01em;
  color: #FFFFFF;
}
.logotipo .dos { color: var(--oxigeno); }

.rotulo {
  font-size: .8125rem; text-transform: uppercase; letter-spacing: .14em;
  color: rgba(231,241,242,.55); margin-top: var(--e2) !important;
  margin-bottom: var(--e6) !important;
}

.formulario-acceso { text-align: left; display: grid; gap: var(--e2); }
.formulario-acceso label {
  font-size: .8125rem; font-weight: 500; color: rgba(231,241,242,.75);
  margin-top: var(--e3);
}
.formulario-acceso input {
  font: inherit; font-size: 1rem;
  min-height: var(--toque);
  padding: 0 var(--e4);
  border: 1px solid rgba(231,241,242,.2);
  border-radius: var(--radio);
  background: rgba(255,255,255,.06);
  color: #FFFFFF;
}
.formulario-acceso input:focus { border-color: var(--oxigeno); background: rgba(255,255,255,.1); }
.formulario-acceso .boton { margin-top: var(--e5); }

.error {
  background: rgba(180,103,30,.22);
  border: 1px solid rgba(226,160,86,.5);
  color: #F6DFC6;
  padding: var(--e3) var(--e4); border-radius: var(--radio); font-size: .9375rem;
}

.aviso {
  background: rgba(79,195,199,.1);
  border: 1px solid rgba(79,195,199,.3);
  padding: var(--e4); border-radius: var(--radio);
  font-size: .875rem; text-align: left; margin-bottom: var(--e4);
  color: rgba(231,241,242,.9);
}
.aviso code { font-size: .8125rem; background: rgba(0,0,0,.25); padding: 1px 5px; border-radius: 4px; }

.pie-acceso {
  margin-top: var(--e5) !important;
  font-size: .8125rem; color: rgba(231,241,242,.45);
}

/* ---------------------------------------------------------------- botones */

.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--toque); padding: 0 var(--e5);
  font: inherit; font-weight: 600; font-size: .9375rem;
  color: #FFFFFF; background: var(--presion);
  border: 0; border-radius: var(--radio);
  text-decoration: none; cursor: pointer;
  transition: background .15s ease;
}
.boton:hover  { background: #0B5A64; }
.boton:active { background: #094C55; }
.boton-ancho  { width: 100%; }

/* ---------------------------------------------------------------- barra */

.barra {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e4);
  height: 56px; padding: 0 var(--e4);
  background: var(--tinta); color: #E7F1F2;
  padding-top: env(safe-area-inset-top);
}

.marca {
  font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.02em;
  color: #FFFFFF; text-decoration: none;
}
.marca span { color: var(--oxigeno); }
.marca em {
  font-style: normal; font-weight: 500; font-size: .75rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(231,241,242,.5); margin-left: var(--e2);
}

.barra-usuario { display: flex; align-items: center; gap: var(--e4); font-size: .875rem; }
.nombre-usuario { color: rgba(231,241,242,.7); }
.salir { color: rgba(231,241,242,.7); text-decoration: none; }
.salir:hover { color: #FFFFFF; }

@media (max-width: 600px) { .nombre-usuario { display: none; } }

/* ---------------------------------------------------------------- navegación */

.lateral { display: none; }

.inferior {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  display: flex;
  background: var(--superficie);
  border-top: 1px solid var(--borde);
  padding-bottom: env(safe-area-inset-bottom);
}

.nav-enlace {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  min-height: 58px;
  text-decoration: none; color: var(--texto-tenue);
  font-size: .6875rem; font-weight: 500;
}
.nav-enlace.activa { color: var(--presion); }

/* Iconos dibujados con CSS: sin peticiones extra y siempre nítidos. */
.nav-icono {
  width: 20px; height: 20px;
  border: 2px solid currentColor; border-radius: 4px;
  position: relative;
}
.nav-icono[data-icono="hoy"]::after {
  content: ''; position: absolute; inset: 3px 3px auto 3px; height: 2px;
  background: currentColor;
}
.nav-icono[data-icono="contactos"] { border-radius: 50%; }
.nav-icono[data-icono="cuentas"]::after {
  content: ''; position: absolute; left: 3px; bottom: 0; width: 6px; height: 7px;
  background: currentColor;
}
.nav-icono[data-icono="campanas"]::after {
  content: ''; position: absolute; inset: 4px auto 4px 4px; width: 2px;
  background: currentColor; box-shadow: 4px 0 0 currentColor, 8px 0 0 currentColor;
}
.nav-icono[data-icono="panel"]::after {
  content: ''; position: absolute; left: 3px; bottom: 3px; width: 3px; height: 5px;
  background: currentColor; box-shadow: 5px -3px 0 currentColor, 10px -5px 0 currentColor;
}
.nav-icono[data-icono="importar"]::after {
  content: ''; position: absolute; left: 50%; top: 3px; width: 2px; height: 9px;
  margin-left: -1px; background: currentColor;
}

/* ---------------------------------------------------------------- contenido */

.contenido {
  padding: var(--e5) var(--e4) calc(58px + var(--e7));
  max-width: 860px; margin: 0 auto;
}

.eyebrow {
  font-size: .75rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texto-tenue);
}

.cabecera-dia {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e4); margin-bottom: var(--e6);
}

/* El manómetro, en pequeño: carga real del día contra el tope de 15. */
.medidor { position: relative; width: 64px; height: 64px; flex: none; text-align: center; }
.medidor svg { width: 64px; height: 64px; transform: rotate(-90deg); }
.medidor-fondo { fill: none; stroke: var(--borde); stroke-width: 5; }
.medidor-valor {
  fill: none; stroke: var(--presion); stroke-width: 5; stroke-linecap: round;
  stroke-dasharray: 163;
  stroke-dashoffset: calc(163 - (163 * var(--porcentaje) / 100));
  transition: stroke-dashoffset .6s cubic-bezier(.22,.9,.25,1);
}
.medidor-cifra {
  position: absolute; top: 17px; left: 0; right: 0;
  font-size: 1.125rem; font-weight: 700; line-height: 1;
}
.medidor-etiqueta {
  position: absolute; top: 34px; left: 0; right: 0;
  font-size: .625rem; color: var(--texto-tenue);
}

.bloque { margin-bottom: var(--e6); }
.bloque h2 { display: flex; align-items: center; gap: var(--e2); margin-bottom: var(--e3); }

.contador {
  font-size: .75rem; font-weight: 600;
  background: var(--borde); color: var(--texto-tenue);
  padding: 1px 8px; border-radius: 999px;
}
.bloque-alerta h2 { color: var(--ambar); }
.bloque-alerta .contador { background: var(--ambar-suave); color: var(--ambar); }

/* ---------------------------------------------------------------- tareas */

.lista-tareas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }

/* En móvil cada fila es una tarjeta. Nada de tablas anchas sin adaptar. */
.tarea {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--borde);
  border-radius: var(--radio);
  padding: var(--e4);
  box-shadow: var(--sombra);
}
.tarea.prioridad-alta { border-left-color: var(--presion); }
.tarea-vencida        { border-left-color: var(--ambar); }

.tarea-plazo {
  display: inline-block; font-size: .75rem; font-weight: 600;
  color: var(--ambar); background: var(--ambar-suave);
  padding: 2px 8px; border-radius: 999px; margin-bottom: var(--e2);
}
.tarea-titulo { font-weight: 600; font-size: .9375rem; }
.tarea-donde  { font-size: .875rem; color: var(--texto-tenue); margin-top: 2px !important; }

.tarea-acciones { display: flex; gap: var(--e2); margin-top: var(--e3); }
.accion {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--toque);
  font-size: .875rem; font-weight: 600; text-decoration: none;
  color: var(--presion); background: rgba(14,110,122,.07);
  border-radius: 8px;
}
.accion:active { background: rgba(14,110,122,.14); }

/* ---------------------------------------------------------------- vacío */

.vacio {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: var(--e6) var(--e5);
  text-align: center;
}
.vacio h1, .vacio h2 { margin-bottom: var(--e3); }
.vacio p { color: var(--texto-tenue); max-width: 46ch; margin: 0 auto var(--e5) !important; }
.nota { font-size: .875rem; color: var(--texto-tenue); }

/* ---------------------------------------------------------------- tablet */

@media (min-width: 768px) {
  .contenido { padding: var(--e6) var(--e5) var(--e7); }
  h1 { font-size: 2rem; }
  .lista-tareas { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------- escritorio */

@media (min-width: 1025px) {
  .inferior { display: none; }

  .lateral {
    display: flex; flex-direction: column; gap: var(--e1);
    position: fixed; top: 56px; bottom: 0; left: 0; width: var(--lateral);
    background: var(--tinta);
    padding: var(--e4) var(--e3);
  }
  .lateral .nav-enlace {
    flex: none; flex-direction: row; justify-content: flex-start;
    gap: var(--e3); min-height: var(--toque);
    padding: 0 var(--e3); border-radius: 8px;
    font-size: .9375rem; color: rgba(231,241,242,.65);
  }
  .lateral .nav-enlace:hover  { background: rgba(255,255,255,.06); color: #FFFFFF; }
  .lateral .nav-enlace.activa { background: var(--presion); color: #FFFFFF; }
  .lateral .nav-icono { width: 18px; height: 18px; }

  .contenido {
    margin-left: var(--lateral);
    max-width: none;
    padding: var(--e6) var(--e7) var(--e7);
  }
  .lista-tareas { grid-template-columns: repeat(3, 1fr); }
}


/* ---------------------------------------------------------------- importador */

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: var(--e5);
  box-shadow: var(--sombra);
  margin-bottom: var(--e4);
}
.tarjeta h2 { margin-bottom: var(--e2); }
.tarjeta > .nota { margin-bottom: var(--e4) !important; }

.campo { margin-bottom: var(--e4); }
.campo label {
  display: block; font-size: .8125rem; font-weight: 600;
  margin-bottom: var(--e2); color: var(--texto);
}
.campo input[type="text"], .campo input[type="date"],
.campo input[type="number"], .campo select {
  width: 100%; font: inherit; font-size: 1rem;
  min-height: var(--toque); padding: 0 var(--e3);
  border: 1px solid var(--borde); border-radius: 8px;
  background: var(--superficie); color: var(--texto);
}
.campo input:focus, .campo select:focus { border-color: var(--presion); outline: none; }

.rejilla-2 { display: grid; gap: var(--e3); grid-template-columns: 1fr; }
@media (min-width: 600px) { .rejilla-2 { grid-template-columns: 1fr 1fr; } }

/* Zona de fichero: área grande, fácil de acertar con el pulgar. */
.zona-fichero {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--e2); min-height: 108px;
  border: 2px dashed var(--borde); border-radius: var(--radio);
  background: var(--papel); cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.zona-fichero:hover { border-color: var(--presion); background: rgba(14,110,122,.04); }
.zona-icono {
  width: 26px; height: 26px; position: relative;
  border: 2px solid var(--presion); border-radius: 5px;
}
.zona-icono::after {
  content: ''; position: absolute; left: 50%; top: 5px;
  width: 2px; height: 12px; margin-left: -1px; background: var(--presion);
}
.zona-texto { font-weight: 600; font-size: .9375rem; color: var(--presion); }

.campo-conmutador {
  border-top: 1px solid var(--borde);
  padding-top: var(--e4); margin-top: var(--e5); margin-bottom: 0;
}
.conmutador { display: flex; align-items: center; gap: var(--e3); cursor: pointer; }
.conmutador input { width: 20px; height: 20px; accent-color: var(--presion); flex: none; }
.conmutador span { font-weight: 600; font-size: .9375rem; }
.campo-conmutador .nota { margin-top: var(--e2) !important; }

/* En móvil la tabla se desplaza en horizontal en vez de romper la página. */
.tabla-envoltorio { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 calc(-1 * var(--e5)); padding: 0 var(--e5); }
.tabla-mapeo { width: 100%; border-collapse: collapse; font-size: .875rem; }
.tabla-mapeo th {
  text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-tenue); padding: var(--e2) var(--e3) var(--e2) 0;
  border-bottom: 1px solid var(--borde); white-space: nowrap;
}
.tabla-mapeo td {
  padding: var(--e3) var(--e3) var(--e3) 0;
  border-bottom: 1px solid var(--borde); vertical-align: middle;
}
.tabla-mapeo select { min-height: 38px; font-size: .875rem; padding: 0 var(--e2);
  border: 1px solid var(--borde); border-radius: 6px; background: var(--superficie); }
.celda-tenue { color: var(--texto-tenue); }

.barra-progreso {
  height: 8px; background: var(--borde); border-radius: 999px;
  overflow: hidden; margin: var(--e4) 0 var(--e3);
}
.barra-relleno {
  height: 100%; width: 0; background: var(--presion);
  border-radius: 999px; transition: width .3s ease;
}

.informe {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: .8125rem; line-height: 1.6;
  background: var(--papel); border: 1px solid var(--borde); border-radius: 8px;
  padding: var(--e4); overflow-x: auto; white-space: pre; margin-bottom: var(--e4);
}

.botonera { display: flex; gap: var(--e3); flex-wrap: wrap; }
.botonera .boton { flex: 1; min-width: 140px; }
.boton-secundario {
  background: transparent; color: var(--presion);
  border: 1px solid var(--borde);
}
.boton-secundario:hover { background: rgba(14,110,122,.06); }

.aviso-flotante {
  position: fixed; left: 50%; bottom: calc(70px + env(safe-area-inset-bottom));
  transform: translateX(-50%); z-index: 60;
  max-width: calc(100vw - 32px);
  padding: var(--e3) var(--e4); border-radius: var(--radio);
  font-size: .9375rem; font-weight: 500;
  background: var(--tinta); color: #FFFFFF;
  box-shadow: 0 8px 24px rgba(8,38,44,.28);
}
.aviso-error { background: var(--ambar); }

@media (min-width: 1025px) {
  .aviso-flotante { bottom: var(--e5); left: calc(50% + var(--lateral) / 2); }
}


/* ---------------------------------------------------------------- clasificador */

.dato-grande {
  font-size: 2.75rem; font-weight: 700; line-height: 1;
  letter-spacing: -0.03em; color: var(--presion);
  margin: var(--e3) 0 var(--e2) !important;
  font-variant-numeric: tabular-nums;
}

.lista-reglas { margin: 0 0 var(--e5); padding-left: 1.1em; }
.lista-reglas li {
  font-size: .9375rem; color: var(--texto-tenue);
  margin-bottom: var(--e2); line-height: 1.5;
}
.lista-reglas strong { color: var(--texto); }

/* La confianza se lee de un vistazo: solo "baja" pide atención. */
.insignia {
  display: inline-block; font-size: .6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  padding: 2px 8px; border-radius: 999px;
}
.insignia-alta  { background: rgba(14,110,122,.12);  color: var(--presion); }
.insignia-media { background: rgba(91,115,121,.14);  color: var(--texto-tenue); }
.insignia-baja  { background: var(--ambar-suave);    color: var(--ambar); }

code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: .8125rem; background: var(--papel);
  padding: 1px 5px; border-radius: 4px; border: 1px solid var(--borde);
}

/* El botón deshabilitado tiene que parecerlo. */
.boton:disabled, .boton[disabled] {
  background: var(--borde); color: var(--texto-tenue);
  cursor: not-allowed; opacity: 1;
}
.boton:disabled:hover { background: var(--borde); }

/* ---------------------------------------------------------------- listado */

.buscador { display: flex; gap: var(--e2); margin-bottom: var(--e3); }
.buscador input {
  flex: 1; font: inherit; font-size: 1rem; min-height: var(--toque);
  padding: 0 var(--e4); border: 1px solid var(--borde);
  border-radius: var(--radio); background: var(--superficie); color: var(--texto);
}
.buscador input:focus { border-color: var(--presion); outline: none; }
.buscador .boton { padding: 0 var(--e4); }

/* Los filtros se desplazan en horizontal: en móvil no caben en una línea. */
.filtros {
  display: flex; gap: var(--e2); margin-bottom: var(--e5);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: var(--e2);
  scrollbar-width: none;
}
.filtros::-webkit-scrollbar { display: none; }

.pastilla, .pastilla-select {
  flex: none; white-space: nowrap;
  min-height: 38px; padding: 0 var(--e4);
  display: inline-flex; align-items: center;
  font: inherit; font-size: .875rem; font-weight: 500;
  color: var(--texto); background: var(--superficie);
  border: 1px solid var(--borde); border-radius: 999px;
  text-decoration: none; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.pastilla.activa { background: var(--presion); border-color: var(--presion); color: #FFFFFF; }
.pastilla-select { padding-right: var(--e5); }

.lista-contactos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }

.contacto {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden;
}
.contacto-cuerpo { display: block; padding: var(--e4); text-decoration: none; color: inherit; }
.contacto-cabecera { display: flex; gap: var(--e3); align-items: flex-start; }

/* El score, como anillo: se compara de un vistazo sin leer el número. */
.marcador-score {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .8125rem; font-weight: 700;
  color: var(--presion);
  background: conic-gradient(var(--presion) calc(var(--score) * 1%), var(--borde) 0);
  position: relative;
}
.marcador-score::before {
  content: ''; position: absolute; inset: 3px;
  background: var(--superficie); border-radius: 50%;
}
.marcador-score { isolation: isolate; }
.marcador-score::after {
  content: attr(title); position: absolute; opacity: 0; pointer-events: none;
}
.marcador-score > * { position: relative; z-index: 1; }

.contacto-nombre { font-weight: 600; font-size: .9375rem; }
.contacto-donde  { font-size: .875rem; color: var(--texto-tenue); margin-top: 1px !important; }
.contacto-meta   { font-size: .8125rem; margin-top: var(--e3) !important;
                   display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; }

.etiqueta-vertical {
  font-size: .6875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; padding: 2px 8px; border-radius: 4px;
  background: rgba(14,110,122,.1); color: var(--presion);
}
.vertical-otro { background: var(--borde); color: var(--texto-tenue); }

.contacto-nota {
  font-size: .8125rem; color: var(--texto-tenue);
  margin-top: var(--e3) !important; padding-left: var(--e3);
  border-left: 2px solid var(--oxigeno); line-height: 1.45;
}
.contacto-acciones {
  display: flex; gap: 1px; background: var(--borde);
  border-top: 1px solid var(--borde);
}
.contacto-acciones .accion { border-radius: 0; background: var(--superficie); }

.paginacion {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e3); margin-top: var(--e5);
}

/* ---------------------------------------------------------------- ficha */

.migas { margin-bottom: var(--e4) !important; font-size: .875rem; }
.migas a { text-decoration: none; color: var(--texto-tenue); }
.migas a:hover { color: var(--presion); }

.ficha-cabecera {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--e4); margin-bottom: var(--e5);
}
.ficha-sub { color: var(--texto-tenue); font-size: .9375rem; margin-top: var(--e2) !important; }

.acciones-rapidas { display: flex; gap: var(--e2); margin-bottom: var(--e5); }
.accion-grande { flex: 1; min-height: 52px; font-size: .9375rem; }

.tarjeta-nota { border-left: 3px solid var(--oxigeno); }
.nota-comercial {
  font-size: 1rem; line-height: 1.55; margin-bottom: var(--e3) !important;
}

textarea {
  width: 100%; font: inherit; font-size: 1rem; line-height: 1.5;
  padding: var(--e3) var(--e4); border: 1px solid var(--borde);
  border-radius: 8px; background: var(--superficie); color: var(--texto);
  resize: vertical; min-height: 88px;
}
textarea:focus { border-color: var(--presion); outline: none; }

/* La línea de tiempo: lo más reciente arriba, con el resultado en el borde. */
.linea-tiempo { list-style: none; margin: 0; padding: 0 0 0 var(--e4); position: relative; }
.linea-tiempo::before {
  content: ''; position: absolute; left: 3px; top: 8px; bottom: 8px;
  width: 2px; background: var(--borde);
}
.hito { position: relative; padding: 0 0 var(--e5) var(--e4); }
.hito::before {
  content: ''; position: absolute; left: -6px; top: 6px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--texto-tenue); border: 2px solid var(--papel);
}
.hito-interesado::before { background: var(--presion); }
.hito-no_interesado::before { background: var(--ambar); }
.hito-cabecera { font-size: .875rem; margin-bottom: var(--e2) !important; }
.hito-resumen { font-size: .9375rem; line-height: 1.5; }
.hito-siguiente {
  font-size: .875rem; color: var(--presion); font-weight: 500;
  margin-top: var(--e2) !important;
}
.etiqueta-resultado {
  font-size: .6875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; padding: 2px 7px; border-radius: 4px;
  background: var(--borde); color: var(--texto-tenue); margin-left: var(--e2);
}

.datos { display: grid; grid-template-columns: auto 1fr; gap: var(--e2) var(--e4); margin: 0; }
.datos dt { font-size: .8125rem; color: var(--texto-tenue); }
.datos dd { margin: 0; font-size: .9375rem; word-break: break-word; }

.aviso-rgpd {
  margin-top: var(--e4) !important; padding: var(--e3);
  background: var(--ambar-suave); border-radius: 8px; color: var(--ambar);
}

@media (min-width: 768px) {
  .lista-contactos { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1025px) {
  .lista-contactos { grid-template-columns: repeat(3, 1fr); }
  .acciones-rapidas { max-width: 480px; }
}

/* ---------------------------------------------------------------- campañas */

.cifras {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--e4); margin: var(--e4) 0 var(--e5);
}
.cifras > div { display: flex; flex-direction: column; gap: 2px; }
.cifra {
  font-size: 1.75rem; font-weight: 700; line-height: 1;
  letter-spacing: -0.02em; color: var(--presion);
  font-variant-numeric: tabular-nums;
}
.cifra-alerta { color: var(--ambar); }
.cifra-etiqueta { font-size: .75rem; color: var(--texto-tenue); }

.progreso-campana { margin-top: var(--e4); }
.progreso-campana .barra-progreso { margin: 0 0 var(--e2); height: 6px; }

.nota-vertical {
  padding: var(--e3); background: rgba(79,195,199,.1);
  border-radius: 8px; border-left: 2px solid var(--oxigeno);
}

/* El plazo en la lista de campaña no siempre es una alarma. */
.plazo-normal { background: var(--borde); color: var(--texto-tenue); }

@media (min-width: 600px) {
  .cifras { grid-template-columns: repeat(4, 1fr); }
}


.equipo { display: grid; gap: var(--e2); grid-template-columns: 1fr; }
.conmutador-equipo {
  padding: var(--e3); border: 1px solid var(--borde);
  border-radius: 8px; background: var(--papel);
}
@media (min-width: 600px) { .equipo { grid-template-columns: 1fr 1fr; } }


/* ---------------------------------------------------------------- borradores */

.codigo-cabecera {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: .75rem; letter-spacing: -0.01em;
  margin: var(--e4) 0 var(--e3) !important;
}

.borrador {
  border: 1px solid var(--borde); border-radius: var(--radio);
  padding: var(--e4); margin-bottom: var(--e3); background: var(--papel);
}
.borrador-titulo { font-size: .875rem; margin-bottom: var(--e2) !important; }
.borrador-asunto {
  font-weight: 600; font-size: .9375rem;
  padding-bottom: var(--e2); margin-bottom: var(--e2) !important;
  border-bottom: 1px solid var(--borde);
}
.borrador-cuerpo {
  font-family: inherit; font-size: .9375rem; line-height: 1.6;
  white-space: pre-wrap; margin: 0 0 var(--e3); color: var(--texto);
}
.borrador .accion { background: var(--superficie); border: 1px solid var(--borde); }

/* ---------------------------------------------------------------- panel */

.tarjeta-titular { border-left: 3px solid var(--presion); }
.titular {
  font-size: 1.125rem; line-height: 1.45; font-weight: 500;
  margin-top: var(--e2) !important;
}

.sube { color: var(--presion); font-weight: 600; }
.baja { color: var(--ambar); font-weight: 600; }

/* El embudo: barras horizontales, que se leen bien en un móvil. */
.embudo { list-style: none; margin: 0; padding: 0; }
.embudo li { margin-bottom: var(--e4); }
.embudo-fila {
  display: flex; align-items: baseline; gap: var(--e2);
  margin-bottom: var(--e2); font-size: .9375rem;
}
.embudo-nombre { flex: 1; font-weight: 500; }
.embudo-cifra { font-weight: 700; font-variant-numeric: tabular-nums; }
.embudo-conversion {
  font-size: .75rem; font-weight: 600; color: var(--texto-tenue);
  background: var(--papel); padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--borde);
}
.embudo-barra {
  height: 10px; background: var(--papel);
  border-radius: 999px; overflow: hidden;
}
.embudo-relleno {
  height: 100%; background: var(--presion); border-radius: 999px;
  transition: width .5s cubic-bezier(.22,.9,.25,1);
}

.celda-alerta { color: var(--ambar); font-weight: 600; }

.lista-acciones { margin: 0 0 var(--e4); padding-left: 1.25em; }
.lista-acciones li {
  font-size: .9375rem; line-height: 1.55;
  margin-bottom: var(--e3); padding-left: var(--e2);
}

.tarjeta-oportunidad { border-left: 3px solid var(--presion); }
.tarjeta-oportunidad .dato-grande { margin: var(--e2) 0 var(--e2) !important; }


/* Un contacto dado de baja se ve, pero apagado: no se le llama. */
.contacto-baja { opacity: .55; }
.contacto-baja .marcador-score { filter: grayscale(1); }


/* ---------------------------------------------------------------- desplegable
   Elemento nativo: se abre aunque el JavaScript no llegue a cargar. */

.desplegable { margin: 0 0 var(--e5); }

.desplegable > summary {
  display: flex; align-items: center; gap: var(--e2);
  min-height: var(--toque); padding: 0 var(--e4);
  font-size: .9375rem; font-weight: 600;
  color: var(--presion); background: rgba(14,110,122,.07);
  border: 1px solid var(--borde); border-radius: var(--radio);
  cursor: pointer; list-style: none;
}
.desplegable > summary::-webkit-details-marker { display: none; }

/* La flecha gira al abrir: deja claro que hay algo debajo. */
.desplegable > summary::before {
  content: ''; flex: none;
  width: 8px; height: 8px; margin-right: var(--e1);
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .2s ease;
}
.desplegable[open] > summary::before { transform: rotate(45deg); }

/* Sin vertical es una tarea pendiente, no un dato: va en ámbar. */
.desplegable-aviso > summary {
  color: var(--ambar); background: var(--ambar-suave);
  border-color: rgba(180,103,30,.3);
}

.tarjeta-plegada { margin-top: var(--e2); border-top-left-radius: 4px; border-top-right-radius: 4px; }