/* =============================================================================
   DAII · Agenda de Contactos — HOJA DE ESTILOS
   -----------------------------------------------------------------------------
   Identidad gráfica derivada del logotipo institucional DO SOSTENIBLE:
     Color principal .... #077C64  (verde teal del logotipo)
     Franja de colores .. verde, naranja, amarillo, gris, rojo, azul, terracota
   Todos los colores están definidos como variables al inicio: cambiando esas
   variables cambia la aplicación completa.
============================================================================= */

/* ---------------------------------------------------------------- 1. TOKENS */
:root{
  /* Color de marca (verde teal del logotipo) */
  --marca-950:#032c23;
  --marca-900:#043b2f;
  --marca-800:#05513f;
  --marca-700:#066750;
  --marca-600:#077c64;   /* principal */
  --marca-500:#0e9377;
  --marca-400:#38ad92;
  --marca-200:#a8d9cc;
  --marca-100:#d7ece5;
  --marca-050:#eff7f4;

  /* Colores de la franja del logotipo */
  --logo-verde:#459b46;
  --logo-naranja:#f47e20;
  --logo-amarillo:#f7c832;
  --logo-gris:#929497;
  --logo-rojo:#f05b4a;
  --logo-azul:#118ccc;
  --logo-terracota:#c86828;

  /* Semánticos */
  --exito:#0f8a63;
  --exito-suave:#e6f4ee;
  --error:#cf3f2c;
  --error-suave:#fdecea;
  --advertencia:#b96410;
  --advertencia-suave:#fdf1e3;
  --info:#0f79ad;
  --info-suave:#e7f3fa;

  /* Neutros */
  --tinta-900:#12201c;
  --tinta-700:#33413d;
  --tinta-600:#4c5b56;
  --tinta-500:#68766f;
  --tinta-400:#8b978f;
  --linea:#e2e9e6;
  --linea-fuerte:#ccd8d3;
  --fondo:#f3f6f5;
  --superficie:#ffffff;
  --superficie-2:#f8fbfa;

  /* Formas */
  --r-sm:8px;
  --r-md:11px;
  --r-lg:15px;
  --r-xl:20px;

  /* Sombras discretas */
  --s-1:0 1px 2px rgba(9,40,33,.05), 0 1px 3px rgba(9,40,33,.05);
  --s-2:0 2px 4px rgba(9,40,33,.05), 0 4px 12px rgba(9,40,33,.06);
  --s-3:0 8px 20px rgba(9,40,33,.09), 0 2px 6px rgba(9,40,33,.06);
  --s-4:0 24px 60px rgba(9,40,33,.20), 0 6px 18px rgba(9,40,33,.12);
  --anillo:0 0 0 3px rgba(7,124,100,.18);

  --transicion:160ms cubic-bezier(.4,0,.2,1);

  --fuente:-apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto,
           "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --ancho-max:1440px;
}

/* ----------------------------------------------------------------- 2. RESET */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--fuente);
  font-size:14.5px;
  line-height:1.55;
  color:var(--tinta-700);
  background:var(--fondo);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,p,dl,dd{margin:0}
ul{margin:0;padding:0;list-style:none}
img{max-width:100%;height:auto;display:block}
button{font:inherit;color:inherit}
input,select,textarea{font:inherit;color:inherit}
code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em}
[hidden]{display:none !important}
::selection{background:var(--marca-200);color:var(--marca-950)}

h1{font-size:1.45rem;font-weight:680;letter-spacing:-.015em;color:var(--tinta-900)}
h2{font-size:1.05rem;font-weight:660;letter-spacing:-.01em;color:var(--tinta-900)}

.solo-lectores{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ----------------------------------------------------------------- 3. ICONOS */
svg.sprite{position:absolute;width:0;height:0;overflow:hidden}
.icono{
  width:18px;height:18px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round;
}
.icono-xl{width:40px;height:40px;stroke-width:1.4}
.color-error{color:var(--error)}
.color-advertencia{color:var(--advertencia)}

/* ------------------------------------------------------- 4. FRANJA DE MARCA */
.franja-marca{
  height:4px;flex:none;
  background:linear-gradient(90deg,
    var(--logo-verde) 0 14.2857%,
    var(--logo-naranja) 14.2857% 28.5714%,
    var(--logo-amarillo) 28.5714% 42.8571%,
    var(--logo-gris) 42.8571% 57.1428%,
    var(--logo-rojo) 57.1428% 71.4285%,
    var(--logo-azul) 71.4285% 85.7142%,
    var(--logo-terracota) 85.7142% 100%);
}

/* ---------------------------------------------------------------- 5. BOTONES */
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 15px;border-radius:var(--r-md);border:1px solid transparent;
  font-size:.875rem;font-weight:600;letter-spacing:-.005em;
  cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:background var(--transicion), border-color var(--transicion),
             color var(--transicion), box-shadow var(--transicion), transform var(--transicion);
}
.boton:focus-visible{outline:none;box-shadow:var(--anillo)}
.boton:active:not(:disabled){transform:translateY(.5px)}
.boton:disabled{opacity:.55;cursor:not-allowed}

.boton-primario{background:var(--marca-600);color:#fff;box-shadow:var(--s-1)}
.boton-primario:hover:not(:disabled){background:var(--marca-700)}
.boton-primario:focus-visible{box-shadow:var(--anillo),var(--s-1)}

.boton-secundario{background:var(--superficie);color:var(--tinta-700);border-color:var(--linea-fuerte);box-shadow:var(--s-1)}
.boton-secundario:hover:not(:disabled){background:var(--marca-050);border-color:var(--marca-200);color:var(--marca-800)}

.boton-suave{background:transparent;color:var(--tinta-600);border-color:transparent}
.boton-suave:hover:not(:disabled){background:var(--marca-050);color:var(--marca-800)}

.boton-fantasma{background:transparent;color:var(--tinta-500);border-color:transparent;padding:9px 11px}
.boton-fantasma:hover:not(:disabled){background:var(--fondo);color:var(--error)}

.boton-peligro{background:var(--error);color:#fff;box-shadow:var(--s-1)}
.boton-peligro:hover:not(:disabled){background:#b13322}
.boton-peligro:focus-visible{box-shadow:0 0 0 3px rgba(207,63,44,.2)}

.boton-bloque{width:100%;padding:11px 16px;font-size:.925rem}

/* Estado "trabajando": el texto se sustituye por un girador */
.boton.trabajando{color:transparent !important;pointer-events:none;position:relative}
.boton.trabajando::after{
  content:"";position:absolute;width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.45);border-top-color:#fff;
  animation:girar .6s linear infinite;
}
.boton-secundario.trabajando::after,.boton-suave.trabajando::after{
  border-color:rgba(7,124,100,.25);border-top-color:var(--marca-600);
}
@keyframes girar{to{transform:rotate(360deg)}}

.boton-cerrar{
  display:grid;place-items:center;width:34px;height:34px;flex:none;
  background:transparent;border:0;border-radius:var(--r-sm);
  color:var(--tinta-400);cursor:pointer;transition:all var(--transicion);
}
.boton-cerrar:hover{background:var(--fondo);color:var(--tinta-700)}
.boton-cerrar:focus-visible{outline:none;box-shadow:var(--anillo)}

.enlace{
  background:none;border:0;padding:0;margin-top:6px;
  color:var(--marca-700);font-weight:600;font-size:.83rem;
  text-decoration:underline;text-underline-offset:2px;cursor:pointer;
}
.enlace:hover{color:var(--marca-800)}

/* ------------------------------------------------------------ 6. FORMULARIOS */
.campo{display:flex;flex-direction:column;gap:6px;min-width:0}
.campo>label{font-size:.8rem;font-weight:640;color:var(--tinta-600);letter-spacing:.005em}
.requerido{color:var(--error);font-weight:700}
.opcional{color:var(--tinta-400);font-weight:500;font-size:.94em}

input[type=text],input[type=email],input[type=password],input[type=tel],
input[type=search],select,textarea{
  width:100%;padding:9px 12px;
  background:var(--superficie);color:var(--tinta-900);
  border:1px solid var(--linea-fuerte);border-radius:var(--r-md);
  font-size:.9rem;transition:border-color var(--transicion),box-shadow var(--transicion),background var(--transicion);
}
input::placeholder,textarea::placeholder{color:var(--tinta-400)}
input:hover:not(:disabled):not([readonly]),select:hover,
textarea:hover:not(:disabled){border-color:var(--marca-200)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--marca-500);box-shadow:var(--anillo)}
input[readonly]{background:var(--superficie-2);color:var(--tinta-600);cursor:default}
input[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--error);background:#fffbfa}
input[aria-invalid=true]:focus,textarea[aria-invalid=true]:focus{box-shadow:0 0 0 3px rgba(207,63,44,.16)}
input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}

/* Área de Nota.
   El texto gris de ejemplo es un placeholder de HTML: nunca se guarda como
   dato. Al hacer clic (foco) desaparece de inmediato, que es el
   comportamiento pedido: el recuadro queda limpio para empezar a escribir. */
textarea{
  min-height:78px;max-height:280px;resize:vertical;
  line-height:1.5;font-family:inherit;
}
textarea::placeholder{
  font-style:italic;
  transition:color 120ms linear, opacity 120ms linear;
}
textarea:focus::placeholder{color:transparent;opacity:0}

.campo-ayuda-nota{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.contador-caracteres{
  font-variant-numeric:tabular-nums;white-space:nowrap;
  color:var(--tinta-400);font-size:.95em;
}
.contador-caracteres.al-limite{color:var(--advertencia);font-weight:640}

select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:34px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2368766f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;
}
select:disabled{background-color:var(--superficie-2);color:var(--tinta-400);cursor:not-allowed}
optgroup{font-weight:700;color:var(--tinta-500);font-size:.85em}
option{font-weight:400;color:var(--tinta-900)}

.entrada-con-icono{position:relative;display:flex;align-items:center}
.entrada-con-icono>.icono{position:absolute;left:11px;color:var(--tinta-400);pointer-events:none;transition:color var(--transicion)}
.entrada-con-icono>input{padding-left:36px}
.entrada-con-icono:focus-within>.icono{color:var(--marca-600)}
.entrada-automatica>input{padding-right:12px}

.boton-ver-clave{
  position:absolute;right:6px;display:grid;place-items:center;
  width:30px;height:30px;background:none;border:0;border-radius:var(--r-sm);
  color:var(--tinta-400);cursor:pointer;transition:all var(--transicion);
}
.boton-ver-clave:hover{background:var(--fondo);color:var(--tinta-700)}
.boton-ver-clave:focus-visible{outline:none;box-shadow:var(--anillo)}

.campo-ayuda{font-size:.775rem;color:var(--tinta-400);line-height:1.4}
.campo-error{
  display:flex;align-items:center;gap:5px;
  font-size:.79rem;font-weight:600;color:var(--error);
}

.casilla{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:.855rem;color:var(--tinta-600);user-select:none}
.casilla input{
  appearance:none;-webkit-appearance:none;flex:none;
  width:17px;height:17px;border:1.5px solid var(--linea-fuerte);
  border-radius:5px;background:var(--superficie);cursor:pointer;
  transition:all var(--transicion);
}
.casilla input:checked{
  background:var(--marca-600);border-color:var(--marca-600);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.8 9.2 17 19 7'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;
}
.casilla input:focus-visible{outline:none;box-shadow:var(--anillo)}
.casilla:hover input:not(:checked){border-color:var(--marca-400)}

/* ---------------------------------------------------------------- 7. ALERTAS */
.alerta{
  display:flex;gap:10px;align-items:flex-start;
  padding:11px 13px;border-radius:var(--r-md);
  font-size:.85rem;line-height:1.5;border:1px solid transparent;
}
.alerta>.icono{margin-top:1px}
.alerta-cuerpo{display:flex;flex-direction:column;gap:4px;min-width:0}
.alerta-detalle{
  font-size:.75rem;opacity:.78;line-height:1.4;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  word-break:break-word;
}
.alerta-error{background:var(--error-suave);border-color:#f6cfc9;color:#8e2b1c}
.alerta-advertencia{background:var(--advertencia-suave);border-color:#f5dcbd;color:#8a4a0b}
.alerta-info{background:var(--info-suave);border-color:#c6e2f1;color:#0b5b83}

/* ------------------------------------------------------------- 8. ARRANQUE */
.arranque{
  position:fixed;inset:0;z-index:80;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  background:var(--fondo);
}
.arranque img{width:110px;height:auto;opacity:.92}
.arranque p{font-size:.85rem;color:var(--tinta-400)}
.cargador{
  width:26px;height:26px;border-radius:50%;
  border:2.5px solid var(--marca-100);border-top-color:var(--marca-600);
  animation:girar .7s linear infinite;
}

/* -------------------------------------------------- 9. CONFIGURACIÓN FALTANTE */
.config-pendiente{
  min-height:100vh;display:grid;place-items:center;padding:24px;
  background:
    radial-gradient(1100px 520px at 50% -10%, var(--marca-050), transparent 70%),
    var(--fondo);
}
.config-tarjeta{
  width:100%;max-width:600px;background:var(--superficie);
  border-radius:var(--r-xl);box-shadow:var(--s-3);overflow:hidden;
}
.config-cuerpo{padding:30px 32px 34px;display:flex;flex-direction:column;gap:13px}
.config-cuerpo h1{font-size:1.3rem}
.config-cuerpo p{font-size:.9rem;color:var(--tinta-600)}
.config-cuerpo code{background:var(--marca-050);color:var(--marca-800);padding:1px 5px;border-radius:4px;font-weight:600}
.config-cuerpo pre{
  margin:0;padding:13px 15px;background:var(--marca-950);color:#c8e6dc;
  border-radius:var(--r-md);overflow-x:auto;font-size:.8rem;line-height:1.65;
}
.config-ayuda{font-size:.845rem !important;color:var(--tinta-500) !important;
  border-top:1px solid var(--linea);padding-top:13px}

/* ---------------------------------------------------------------- 10. LOGIN */
.login{
  min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:20px;padding:28px 20px 24px;
  background:
    radial-gradient(900px 460px at 50% -8%, var(--marca-100), transparent 68%),
    radial-gradient(700px 420px at 92% 105%, #e9f2ee, transparent 70%),
    var(--fondo);
}
.login-tarjeta{
  width:100%;max-width:420px;background:var(--superficie);
  border-radius:var(--r-xl);box-shadow:var(--s-3);overflow:hidden;
  animation:aparecer .35s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes aparecer{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.login-cuerpo{padding:30px 32px 26px;display:flex;flex-direction:column;gap:14px}
.login-logo{width:124px;height:auto;margin:2px auto 4px}
.login-institucion{
  text-align:center;font-size:1.6rem;font-weight:760;letter-spacing:.05em;
  color:var(--marca-700);line-height:1.1;
}
.login-sistema{
  text-align:center;font-size:.94rem;font-weight:640;color:var(--tinta-900);
  letter-spacing:-.01em;margin-top:-6px;
}
.login-subtitulo{
  text-align:center;font-size:.8rem;color:var(--tinta-400);
  margin-top:-11px;padding-bottom:6px;border-bottom:1px solid var(--linea);
}
#formulario-login{display:flex;flex-direction:column;gap:14px}
#formulario-login .boton-bloque{margin-top:4px}
.login-nota{
  display:flex;gap:8px;align-items:flex-start;
  margin-top:6px;padding-top:14px;border-top:1px solid var(--linea);
  font-size:.775rem;color:var(--tinta-400);line-height:1.45;
}
.login-nota .icono{width:15px;height:15px;margin-top:1px;flex:none}
.login-pie{font-size:.775rem;color:var(--tinta-400);text-align:center}

/* --------------------------------------------------------------- 11. TOPBAR */
.topbar{
  position:sticky;top:0;z-index:30;
  background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--linea);
}
.topbar-interior{
  max-width:var(--ancho-max);margin:0 auto;padding:0 26px;
  height:62px;display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.marca{display:flex;align-items:center;gap:12px;min-width:0}
.marca-logo{width:auto;height:38px}
.marca-textos{
  display:flex;flex-direction:column;min-width:0;
  padding-left:13px;border-left:1px solid var(--linea);
}
.marca-institucion{
  font-size:1.02rem;font-weight:760;letter-spacing:.045em;
  color:var(--marca-700);line-height:1.2;
}
.marca-sistema{
  font-size:.755rem;color:var(--tinta-400);line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.topbar-derecha{display:flex;align-items:center;gap:10px;min-width:0}

.indicador-tiempo-real{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  padding:4px 10px;border-radius:999px;white-space:nowrap;
  background:var(--exito-suave);color:var(--exito);
  font-size:.72rem;font-weight:660;letter-spacing:.01em;
}
.indicador-tiempo-real .icono{width:13px;height:13px;stroke-width:2}
.indicador-tiempo-real.pulso .icono{animation:latido 1.1s ease-out}
@keyframes latido{0%{transform:scale(1)}35%{transform:scale(1.35)}100%{transform:scale(1)}}

.usuario{display:flex;align-items:center;gap:9px;padding-left:6px;min-width:0}
.usuario-inicial{
  display:grid;place-items:center;flex:none;
  width:33px;height:33px;border-radius:50%;
  background:var(--marca-600);color:#fff;
  font-size:.79rem;font-weight:700;letter-spacing:.02em;
}
.usuario-datos{display:flex;flex-direction:column;min-width:0;max-width:210px}
.usuario-correo{
  font-size:.79rem;font-weight:620;color:var(--tinta-700);line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.usuario-rol{font-size:.7rem;color:var(--tinta-400);line-height:1.25;text-transform:capitalize}

/* -------------------------------------------------------------- 12. CONTENIDO */
.contenido{max-width:var(--ancho-max);margin:0 auto;padding:26px 26px 40px;display:flex;flex-direction:column;gap:18px}

.encabezado-pagina{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;
}
.subtitulo{font-size:.875rem;color:var(--tinta-500);margin-top:2px}
.acciones-principales{display:flex;gap:9px;flex-wrap:wrap}

/* ------------------------------------------------------------ 13. ESTADÍSTICAS */
.estadisticas{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tarjeta-dato{
  display:flex;align-items:center;gap:14px;
  padding:16px 18px;background:var(--superficie);
  border:1px solid var(--linea);border-radius:var(--r-lg);
  box-shadow:var(--s-1);position:relative;overflow:hidden;
  transition:box-shadow var(--transicion),transform var(--transicion),border-color var(--transicion);
}
.tarjeta-dato::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--acento)}
.tarjeta-dato:hover{box-shadow:var(--s-2);transform:translateY(-1px);border-color:var(--linea-fuerte)}
.dato-icono{
  display:grid;place-items:center;flex:none;width:42px;height:42px;
  border-radius:12px;background:var(--acento-suave);color:var(--acento);
}
.dato-icono .icono{width:21px;height:21px}
.dato-textos{display:flex;flex-direction:column;min-width:0}
.dato-etiqueta{
  font-size:.685rem;font-weight:700;letter-spacing:.055em;text-transform:uppercase;
  color:var(--tinta-400);line-height:1.3;
}
.dato-valor{
  font-size:1.85rem;font-weight:700;letter-spacing:-.03em;color:var(--tinta-900);
  line-height:1.15;font-variant-numeric:tabular-nums;
}
.dato-nota{font-size:.73rem;color:var(--tinta-400);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dato-marca  {--acento:var(--marca-600);--acento-suave:var(--marca-050)}
.dato-azul   {--acento:var(--logo-azul);--acento-suave:#e7f3fa}
.dato-naranja{--acento:var(--logo-naranja);--acento-suave:#fdf1e5}
.dato-verde  {--acento:var(--logo-verde);--acento-suave:#ecf5ec}
.dato-valor.cambiando{animation:destacar .5s ease-out}
@keyframes destacar{0%{color:var(--marca-500);transform:scale(1.04)}100%{color:var(--tinta-900);transform:none}}

/* ----------------------------------------------------------------- 14. PANELES */
.panel{
  background:var(--superficie);border:1px solid var(--linea);
  border-radius:var(--r-lg);box-shadow:var(--s-1);
}
.panel-filtros{padding:16px 18px}
.filtros-fila{
  display:grid;
  grid-template-columns:minmax(240px,1.7fr) minmax(155px,1fr) minmax(175px,1fr) minmax(155px,.9fr) auto;
  gap:13px;align-items:start;
}
.campo-buscador{position:relative}

/* ------------------------------------------------------------------ 15. TABLA */
.panel-tabla{overflow:hidden;display:flex;flex-direction:column}
.tabla-encabezado{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--linea);background:var(--superficie-2);
}
.contador{font-size:.855rem;font-weight:660;color:var(--tinta-700)}
.contador strong{color:var(--marca-700);font-variant-numeric:tabular-nums}
.marca-tiempo{font-size:.735rem;color:var(--tinta-400);white-space:nowrap}

.tabla-envoltura{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabla{width:100%;border-collapse:collapse;font-size:.875rem}
.tabla thead th{
  position:sticky;top:0;z-index:1;
  padding:10px 16px;text-align:left;white-space:nowrap;
  background:var(--superficie);border-bottom:1px solid var(--linea);
  font-size:.685rem;font-weight:700;letter-spacing:.055em;text-transform:uppercase;
  color:var(--tinta-400);
}
.tabla tbody td{
  padding:11px 16px;border-bottom:1px solid var(--linea);vertical-align:middle;
}
.tabla tbody tr{transition:background var(--transicion)}
.tabla tbody tr:hover{background:var(--marca-050)}
.tabla tbody tr:last-child td{border-bottom:0}
.tabla tbody tr.entrando{animation:fila-nueva .8s ease-out}
@keyframes fila-nueva{0%{background:var(--marca-100)}100%{background:transparent}}

.col-acciones{width:1%;white-space:nowrap;text-align:right !important}
.col-fecha{width:1%;white-space:nowrap}
.col-nombre{min-width:170px}
.col-correo{max-width:230px}

.celda-nombre{font-weight:640;color:var(--tinta-900)}
.celda-autor{display:block;font-size:.73rem;color:var(--tinta-400);font-weight:400;margin-top:1px}
.celda-telefono{
  display:inline-flex;align-items:center;gap:4px;
  font-variant-numeric:tabular-nums;letter-spacing:.01em;color:var(--tinta-700);
}

/* Correo: se recorta con puntos suspensivos si no cabe. */
.celda-correo{
  display:block;max-width:230px;
  color:var(--tinta-700);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.celda-correo a{color:inherit;text-decoration:none}
.celda-correo a:hover{color:var(--marca-700);text-decoration:underline;text-underline-offset:2px}

/* Nota: se muestra en una sola línea debajo del nombre.
   El texto completo aparece al pasar el cursor por encima. */
.celda-nota{
  display:flex;align-items:center;gap:5px;margin-top:2px;
  max-width:250px;font-size:.755rem;font-weight:400;font-style:italic;
  color:var(--tinta-500);cursor:help;
}
.celda-nota .icono{width:12px;height:12px;flex:none;color:var(--logo-naranja);stroke-width:2}
.celda-nota span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sin-dato{color:var(--tinta-400)}
.etiqueta-provincia{
  display:inline-block;padding:2.5px 9px;border-radius:999px;
  background:var(--marca-050);border:1px solid var(--marca-100);
  color:var(--marca-800);font-size:.775rem;font-weight:600;white-space:nowrap;
}
.celda-fecha{font-variant-numeric:tabular-nums;color:var(--tinta-600)}
.celda-hora{display:block;font-size:.75rem;color:var(--tinta-400)}

.acciones-fila{display:inline-flex;gap:4px;justify-content:flex-end}
.accion{
  display:grid;place-items:center;width:31px;height:31px;
  background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r-sm);
  color:var(--tinta-500);cursor:pointer;transition:all var(--transicion);
}
.accion:hover{background:var(--marca-050);border-color:var(--marca-100);color:var(--marca-700)}
.accion:focus-visible{outline:none;box-shadow:var(--anillo)}
.accion-eliminar:hover{background:var(--error-suave);border-color:#f6cfc9;color:var(--error)}
.accion.copiado{background:var(--exito-suave);border-color:#c6e6d7;color:var(--exito)}

/* Esqueleto de carga */
.esqueleto{height:11px;border-radius:5px;background:var(--linea);position:relative;overflow:hidden}
.esqueleto::after{
  content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
  animation:brillo 1.25s infinite;
}
@keyframes brillo{100%{transform:translateX(100%)}}
.esqueleto-corto{width:52%}
.esqueleto-medio{width:74%}

/* Estados vacío / error */
.estado-vacio{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:56px 24px 60px;text-align:center;color:var(--tinta-500);
}
.estado-vacio .icono-xl{color:var(--linea-fuerte)}
.estado-vacio h2{font-size:1rem}
.estado-vacio p{font-size:.865rem;max-width:390px}
.estado-vacio .boton{margin-top:8px}

/* Paginación */
.tabla-pie{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:12px 18px;border-top:1px solid var(--linea);background:var(--superficie-2);
}
.por-pagina{display:flex;align-items:center;gap:8px;font-size:.815rem;color:var(--tinta-500)}
.por-pagina select{width:auto;padding:5px 30px 5px 10px;font-size:.815rem;border-radius:var(--r-sm)}
.paginacion{display:flex;align-items:center;gap:9px}
.paginacion-texto{
  font-size:.815rem;font-weight:620;color:var(--tinta-600);
  font-variant-numeric:tabular-nums;min-width:118px;text-align:center;
}
.boton-icono{padding:7px 12px}

/* ------------------------------------------------------------------- 16. PIE */
.pie{
  max-width:var(--ancho-max);margin:0 auto;padding:0 26px 30px;
  display:flex;gap:8px;flex-wrap:wrap;
  font-size:.755rem;color:var(--tinta-400);
}
.pie-separador{color:var(--linea-fuerte)}

/* --------------------------------------------------------------- 17. MODALES */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px}
.modal-fondo{
  position:absolute;inset:0;background:rgba(9,40,33,.42);
  backdrop-filter:blur(3px);animation:fundido .18s ease-out both;
}
@keyframes fundido{from{opacity:0}to{opacity:1}}
.modal-caja{
  position:relative;width:100%;max-width:520px;
  max-height:calc(100vh - 40px);
  max-height:calc(100dvh - 40px);   /* en celulares descuenta la barra del navegador */
  display:flex;flex-direction:column;
  background:var(--superficie);border-radius:var(--r-xl);box-shadow:var(--s-4);
  overflow:hidden;animation:subir .22s cubic-bezier(.2,.9,.3,1) both;
}
/* El formulario que va dentro de la caja también tiene que ser un contenedor
   flexible. Si no, el cuerpo no se limita en altura, no aparece la barra de
   desplazamiento, y el pie con el botón "Guardar contacto" queda recortado
   fuera de la pantalla en monitores de poca altura. */
.modal-caja > form{
  display:flex;flex-direction:column;
  flex:1 1 auto;min-height:0;
}
@keyframes subir{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.modal-encabezado{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:19px 20px 15px;border-bottom:1px solid var(--linea);
  flex:none;
}
.modal-descripcion{font-size:.815rem;color:var(--tinta-400);margin-top:3px}
/* El cuerpo es lo único que se desplaza cuando el modal no cabe. */
.modal-cuerpo{
  padding:19px 20px;display:flex;flex-direction:column;gap:15px;
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
}
/* El pie queda SIEMPRE visible, pegado al fondo de la caja. */
.modal-pie{
  display:flex;justify-content:flex-end;gap:9px;
  padding:14px 20px;border-top:1px solid var(--linea);background:var(--superficie-2);
  flex:none;
}
.modal-peligro{max-width:480px}
.encabezado-peligro{display:flex;gap:13px;align-items:flex-start}
.peligro-icono{
  display:grid;place-items:center;flex:none;width:40px;height:40px;
  border-radius:12px;background:var(--error-suave);color:var(--error);
}
.modal-peligro h2{font-size:.99rem;line-height:1.4}
.modal-aviso-fecha{
  display:flex;gap:8px;align-items:center;
  padding-top:3px;font-size:.785rem;color:var(--tinta-400);
}
.modal-aviso-fecha .icono{width:15px;height:15px;flex:none}

.duplicado-datos{display:flex;flex-direction:column;gap:2px;margin-top:7px;font-size:.815rem}
.duplicado-datos>div{display:flex;gap:6px}
.duplicado-datos dt{font-weight:400;opacity:.75;min-width:96px}
.duplicado-datos dd{font-weight:660}

.resumen-contacto{
  display:flex;flex-direction:column;gap:0;
  background:var(--superficie-2);border:1px solid var(--linea);border-radius:var(--r-md);
  overflow:hidden;
}
.resumen-contacto>div{
  display:grid;grid-template-columns:126px 1fr;gap:12px;
  padding:10px 14px;border-bottom:1px solid var(--linea);
}
.resumen-contacto>div:last-child{border-bottom:0}
.resumen-contacto dt{font-size:.775rem;color:var(--tinta-400);font-weight:600}
.resumen-contacto dd{font-size:.865rem;color:var(--tinta-900);font-weight:620;word-break:break-word}

/* -------------------------------------------------------- 18. NOTIFICACIONES */
.notificaciones{
  position:fixed;right:20px;bottom:20px;z-index:90;
  display:flex;flex-direction:column-reverse;gap:9px;
  max-width:min(384px,calc(100vw - 40px));pointer-events:none;
}
/* Los avisos NO interceptan clics: si aparecen encima de una fila de la
   tabla, usted sigue pudiendo presionar sus botones. Solo la "x" de cerrar
   recibe el clic. */
.notificacion{
  display:flex;gap:11px;align-items:flex-start;pointer-events:none;
  padding:12px 14px;background:var(--superficie);
  border:1px solid var(--linea);border-left:3px solid var(--n-color,var(--marca-600));
  border-radius:var(--r-md);box-shadow:var(--s-3);
  animation:entrar-notif .26s cubic-bezier(.2,.9,.3,1) both;
}
.notificacion.saliendo{animation:salir-notif .2s ease-in forwards}
@keyframes entrar-notif{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes salir-notif{to{opacity:0;transform:translateX(18px)}}
.notif-icono{
  display:grid;place-items:center;flex:none;width:24px;height:24px;
  border-radius:50%;background:var(--n-suave);color:var(--n-color);
}
.notif-icono .icono{width:14px;height:14px;stroke-width:2.4}
.notif-textos{display:flex;flex-direction:column;gap:1px;min-width:0}
.notif-titulo{font-size:.85rem;font-weight:640;color:var(--tinta-900);line-height:1.4}
.notif-detalle{font-size:.785rem;color:var(--tinta-500);line-height:1.45}
.notificacion.exito{--n-color:var(--exito);--n-suave:var(--exito-suave)}
.notificacion.error{--n-color:var(--error);--n-suave:var(--error-suave)}
.notificacion.info{--n-color:var(--info);--n-suave:var(--info-suave)}
.notificacion.advertencia{--n-color:var(--advertencia);--n-suave:var(--advertencia-suave)}
.notif-cerrar{
  margin-left:auto;flex:none;background:none;border:0;padding:2px;
  color:var(--tinta-400);cursor:pointer;border-radius:5px;
  pointer-events:auto;
}
.notif-cerrar:hover{color:var(--tinta-700)}
.notif-cerrar .icono{width:14px;height:14px}

/* ------------------------------------------------------------ 19. RESPONSIVE */
@media (max-width:1220px){
  .filtros-fila{grid-template-columns:1fr 1fr;grid-template-areas:none}
  .campo-buscador{grid-column:1/-1}
  #boton-limpiar{justify-self:start}
}
@media (max-width:1080px){
  .estadisticas{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .topbar-interior,.contenido,.pie{padding-left:18px;padding-right:18px}
  .solo-escritorio{display:none}
  .usuario-datos{max-width:150px}
  .encabezado-pagina{align-items:flex-start}
  .acciones-principales{width:100%}
  .acciones-principales .boton{flex:1 1 auto;min-width:0}

  /* La tabla se convierte en tarjetas */
  .tabla-envoltura{overflow:visible}
  .tabla thead{display:none}
  .tabla,.tabla tbody,.tabla tr,.tabla td{display:block;width:auto}
  .tabla tbody tr{
    margin:12px;padding:4px 0;
    border:1px solid var(--linea);border-radius:var(--r-md);
    background:var(--superficie);box-shadow:var(--s-1);
  }
  .tabla tbody tr:hover{background:var(--superficie)}
  .tabla tbody td{
    display:grid;grid-template-columns:112px 1fr;gap:10px;align-items:center;
    padding:8px 14px;border-bottom:1px solid var(--linea);
  }
  .tabla tbody td:last-child{border-bottom:0}
  .tabla tbody td::before{
    content:attr(data-etiqueta);
    font-size:.665rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
    color:var(--tinta-400);
  }
  .tabla tbody td.col-acciones{text-align:left !important;padding-top:10px;padding-bottom:10px}
  .tabla tbody td.col-acciones .acciones-fila{justify-content:flex-start}
  .celda-nombre{font-size:.95rem}
  /* En las celdas con varias líneas (nombre + nota + autor, y fecha + hora)
     todo el contenido va en la columna de la derecha, no debajo de la etiqueta. */
  .tabla tbody td.col-nombre > span,
  .tabla tbody td.col-fecha > span{grid-column:2}
  /* En tarjeta, el correo y la nota se ven completos y en varias líneas. */
  .tabla tbody td.col-correo{max-width:none}
  .celda-correo{max-width:none;white-space:normal;word-break:break-all}
  .celda-nota{
    max-width:none;align-items:flex-start;margin-top:4px;
    font-size:.79rem;cursor:default;
  }
  .celda-nota span{white-space:normal;overflow:visible;text-overflow:clip}
  .celda-nota .icono{margin-top:3px}
  .tabla-pie{justify-content:center}
  .paginacion{width:100%;justify-content:space-between}
}
@media (max-width:620px){
  .topbar-interior{height:auto;padding-top:10px;padding-bottom:10px;flex-wrap:wrap}
  .marca-sistema{display:none}
  .usuario-datos{max-width:none;flex:1}
  .filtros-fila{grid-template-columns:1fr}
  .estadisticas{grid-template-columns:1fr}
  .tarjeta-dato{padding:14px 16px}
  .dato-valor{font-size:1.6rem}
  .acciones-principales{flex-direction:column}
  .acciones-principales .boton{width:100%}
  .modal{padding:12px}
  .modal-caja{max-height:calc(100vh - 24px)}
  .modal-pie{flex-direction:column-reverse}
  .modal-pie .boton{width:100%}
  .notificaciones{left:12px;right:12px;bottom:12px;max-width:none}
  .resumen-contacto>div{grid-template-columns:1fr;gap:2px}
  .tabla-encabezado{flex-direction:column;gap:3px}
  .login-cuerpo{padding:26px 22px 22px}
}

/* ------------------------------------------------- 20. ACCESIBILIDAD / IMPRESIÓN */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
}
@media print{
  .topbar,.encabezado-pagina .acciones-principales,.panel-filtros,.tabla-pie,
  .col-acciones,.notificaciones,.pie,.marca-tiempo{display:none !important}
  body{background:#fff}
  .panel{border:0;box-shadow:none}
  .tabla thead th{color:#000}
}