:root {
  --negro: #000000;
  --tinta: #1F3A5F;
  --tinta-suave: #E8EEF5;
  --papel: #FFFFFF;
  --fondo: #F4F5F7;
  --texto: #1C1F24;
  --gris: #5F6670;
  --linea: #DADDE2;
  --ok: #2F7D4F;
  --baja: #A33A2E;
  --radio: 6px;
  font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--texto);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fondo); font-size: 16px; line-height: 1.45; }
[hidden] { display: none !important; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

/* Sello de marca */
.marca-sello {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 2px solid currentColor; font-weight: 700; font-size: .78rem; letter-spacing: .04em;
}

/* Login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; background: var(--negro); }
.login-caja { width: 100%; max-width: 360px; background: var(--papel); padding: 2rem; border-radius: 10px; display: grid; gap: 1rem; }
.login-marca { display: flex; gap: .9rem; align-items: center; margin-bottom: .5rem; color: var(--tinta); }
.login-marca h1 { font-size: 1.35rem; margin: 0; color: var(--texto); }
.login-marca p { margin: 0; color: var(--gris); }
label { display: grid; gap: .3rem; font-weight: 600; font-size: .92rem; }
input, select {
  width: 100%; padding: .55rem .7rem; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--papel);
}
input:focus, select:focus { border-color: var(--tinta); outline: none; box-shadow: 0 0 0 3px var(--tinta-suave); }
.error { color: var(--baja); margin: 0; min-height: 1.2em; font-size: .92rem; }

/* Botones */
.btn {
  padding: .5rem .95rem; border: 1px solid var(--linea); background: var(--papel); border-radius: var(--radio);
  cursor: pointer; font-weight: 600; white-space: nowrap;
}
.btn:hover { border-color: var(--gris); }
.btn-primario { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.btn-primario:hover { background: #172d4a; }
.btn-bloque { width: 100%; padding: .7rem; }
.btn-link { background: none; border: none; color: var(--tinta); cursor: pointer; font-weight: 600; padding: .2rem .35rem; }
.btn-link:hover { text-decoration: underline; }
.btn-link.peligro { color: var(--baja); }

/* Copete negro */
.copete {
  position: sticky; top: 0; z-index: 10; background: var(--negro); color: #fff;
  display: flex; align-items: center; gap: 1.5rem; padding: .6rem 1.25rem; min-height: 60px;
}
.copete-izq { display: flex; align-items: center; gap: .7rem; }
.copete-titulo { font-weight: 700; font-size: 1.05rem; }
.copete-nav { display: flex; gap: .25rem; flex: 1; }
.copete-nav button {
  background: none; border: none; color: #B9BEC6; padding: .45rem .8rem; border-radius: var(--radio); cursor: pointer; font-weight: 600;
}
.copete-nav button:hover { color: #fff; }
.copete-nav button.activo { color: #fff; background: #1d1d1d; }
.copete-der { position: relative; }
.usuario-btn { display: flex; align-items: center; gap: .55rem; background: none; border: none; color: #fff; cursor: pointer; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--tinta); display: grid; place-items: center;
  font-weight: 700; font-size: .85rem;
}
.menu-usuario {
  position: absolute; right: 0; top: calc(100% + .5rem); background: var(--papel); color: var(--texto);
  border: 1px solid var(--linea); border-radius: 8px; min-width: 210px; padding: .4rem; box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.menu-usuario button { display: block; width: 100%; text-align: left; background: none; border: none; padding: .55rem .7rem; border-radius: 4px; cursor: pointer; }
.menu-usuario button:hover { background: var(--fondo); }
.menu-rol { margin: .2rem .7rem .4rem; color: var(--gris); font-size: .85rem; }

/* Vistas */
.vista { max-width: 1320px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.barra { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; align-items: center; margin-bottom: .75rem; }
.barra h2 { margin: 0; font-size: 1.3rem; }
.filtros { display: flex; flex-wrap: wrap; gap: .5rem; flex: 1; }
.filtros input { max-width: 340px; }
.filtros select { width: auto; min-width: 180px; }
.acciones { display: flex; gap: .5rem; }
.conteo { color: var(--gris); margin: 0 0 .6rem; font-size: .92rem; }

/* Tabla */
.tabla-envoltura { background: var(--papel); border: 1px solid var(--linea); border-radius: 8px; overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; }
.tabla th {
  text-align: left; font-size: .85rem; color: var(--gris); font-weight: 600; padding: .65rem .8rem;
  border-bottom: 1px solid var(--linea); background: #FAFBFC; white-space: nowrap;
}
.tabla td { padding: .6rem .8rem; border-bottom: 1px solid #EDEFF2; vertical-align: middle; }
.tabla tbody tr:last-child td { border-bottom: none; }
.tabla tbody tr:hover { background: #FAFBFD; }
.tabla .num { text-align: right; }
.tabla tr.inactivo td { color: #9AA0A8; }
.c-nombre { font-weight: 600; min-width: 13rem; }
.c-puesto { min-width: 9rem; }
.c-puesto { color: var(--gris); }
/* La extensión es el dato que más se busca: se ve grande y tabular */
.ext { font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; color: var(--tinta); }
.ext-cel { font-variant-numeric: tabular-nums; font-weight: 600; }
.tabla a { color: var(--texto); text-decoration: none; }
.tabla a:hover { color: var(--tinta); text-decoration: underline; }
.tel { font-variant-numeric: tabular-nums; white-space: nowrap; }
.chip { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.chip.ok { background: #E4F2E9; color: var(--ok); }
.chip.baja { background: #F6E4E2; color: var(--baja); }
.chip.rol { background: var(--tinta-suave); color: var(--tinta); }
.vacio { text-align: center; color: var(--gris); padding: 2.5rem 1rem !important; }
.acciones-fila { white-space: nowrap; text-align: right; width: 1%; }
#tabla-contactos .acciones-fila button { display: block; margin-left: auto; }

/* Modal */
dialog { border: none; border-radius: 10px; padding: 0; width: min(560px, calc(100vw - 2rem)); box-shadow: 0 20px 50px rgba(0,0,0,.3); }
dialog::backdrop { background: rgba(0,0,0,.45); }
#modal-form { padding: 1.5rem; display: grid; gap: 1rem; }
#modal-form h2 { margin: 0; font-size: 1.2rem; }
#modal-cuerpo { display: grid; gap: .85rem; grid-template-columns: 1fr 1fr; }
#modal-cuerpo .ancho { grid-column: 1 / -1; }
.modal-acciones { display: flex; justify-content: flex-end; gap: .5rem; }
.dato-temporal { font-size: 1.3rem; font-weight: 700; letter-spacing: .05em; background: var(--fondo); padding: .7rem 1rem; border-radius: var(--radio); text-align: center; user-select: all; }
.nota { color: var(--gris); font-size: .92rem; margin: 0; }

.aviso {
  position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%); background: var(--texto); color: #fff;
  padding: .65rem 1.1rem; border-radius: 8px; z-index: 50; box-shadow: 0 6px 20px rgba(0,0,0,.25);
}

/* Móvil: la tabla se vuelve tarjetas */
@media (max-width: 820px) {
  .copete { flex-wrap: wrap; gap: .5rem 1rem; padding: .6rem .9rem; }
  .copete-titulo { display: none; }
  .copete-nav { order: 3; flex-basis: 100%; overflow-x: auto; }
  .copete-der { margin-left: auto; }
  .usuario-nombre { display: none; }
  .filtros input, .filtros select { max-width: none; flex: 1 1 100%; }
  .acciones { width: 100%; }
  .acciones .btn { flex: 1; }
  #modal-cuerpo { grid-template-columns: 1fr; }
  .tabla thead { display: none; }
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }
  .tabla tr { padding: .75rem .9rem; border-bottom: 1px solid var(--linea); }
  .tabla td { border: none; padding: .12rem 0; text-align: left !important; }
  .tabla td[data-e]:not(:empty)::before { content: attr(data-e) ': '; color: var(--gris); font-size: .85rem; }
  .tabla td.c-nombre::before { content: none !important; }
  .c-nombre, .c-puesto { min-width: 0; }
  .acciones-fila { padding-top: .4rem !important; width: 100%; }
  #tabla-contactos .acciones-fila button { display: inline-block; margin-left: 0; }
}

/* ===== Encabezado del formato ES-TH-07 (pantalla) ===== */
.sgc-banda {
  display: grid; grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr); align-items: center; gap: 1rem;
  background: #000; color: #fff; padding: .55rem 1.1rem; margin-bottom: 1rem;
}
.sgc-control { display: grid; font-family: Calibri, Carlito, 'Source Sans 3', Arial, sans-serif; font-weight: 700; font-size: .92rem; line-height: 1.3; }
.sgc-control b { font-weight: 700; }
.sgc-titulo {
  margin: 0; font-family: Constantia, 'Palatino Linotype', Georgia, 'Times New Roman', serif; font-weight: 700;
  font-size: clamp(1.3rem, 3.2vw, 2.3rem); letter-spacing: .02em; text-align: center; white-space: nowrap;
}
.sgc-logo { justify-self: end; height: 46px; width: auto; }
.formato-caja { background: var(--papel); border: 1px solid var(--linea); border-radius: 8px; padding: 1.25rem; display: grid; gap: .9rem; max-width: 460px; }
@media (max-width: 820px) {
  .sgc-banda { grid-template-columns: 1fr auto; padding: .6rem .8rem; }
  .sgc-titulo { grid-column: 1 / -1; grid-row: 2; font-size: 1.25rem; }
  .sgc-control { font-size: .8rem; }
  .sgc-logo { height: 34px; }
}

/* ===== Versión impresa: réplica del Excel (carta vertical, escala 70 %, márgenes 1 cm / 0.6 cm) ===== */
#impresion { display: none; }
@page { size: letter portrait; margin: 0.394in 0.236in; }
@media print {
  html, body { background: #fff !important; margin: 0; }
  body > *:not(#impresion) { display: none !important; }
  #impresion { display: block; }
  #impresion, #impresion * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.xl { border-collapse: collapse; table-layout: fixed; width: 518.3pt; font-family: Calibri, Carlito, Arial, sans-serif; font-size: 7.7pt; color: #000; }
.xl col.a { width: 9.6pt; } .xl col.b { width: 128.8pt; } .xl col.c { width: 137pt; } .xl col.d { width: 24.3pt; }
.xl col.e { width: 30.4pt; } .xl col.f { width: 57.8pt; } .xl col.g { width: 130.4pt; }
.xl thead { display: table-header-group; }
.xl tr { page-break-inside: avoid; break-inside: avoid; }
.xl td, .xl th { padding: 0 1.5pt; line-height: 1.15; overflow: hidden; }
.xl .r1 td { height: 5.04pt; padding: 0; }
.xl .r5 td { height: 5.88pt; padding: 0; }
.xl .banda td.cb { padding: 0; height: 30.24pt; background: #000; color: #fff; }
.xl .banda-int { position: relative; height: 30.24pt; }
.xl .ctl { position: absolute; left: 1.5pt; top: 0; font-weight: 700; }
.xl .ctl div { height: 10.08pt; line-height: 10.08pt; white-space: nowrap; }
.xl .tit { position: absolute; left: 130.3pt; top: 0; height: 30.24pt; line-height: 30.24pt; white-space: nowrap;
  font-family: Constantia, 'Palatino Linotype', Georgia, 'Times New Roman', serif; font-weight: 700; font-size: 18.2pt; }
.xl .logo { position: absolute; left: 447pt; top: 3pt; width: 53.3pt; height: 24.3pt; }
.xl .enc th { height: 10.08pt; background: #000; color: #fff; font-weight: 700; text-align: center; border: 0.5pt solid #000; }
.xl tbody td { height: 10.08pt; border: 0.5pt solid #000; text-align: center; vertical-align: middle; }
.xl tbody td.l { text-align: left; }
.xl tbody tr:nth-child(odd) td:not(.a) { background: #D9D9D9; }
.xl td.a, .xl th.a { border: none !important; background: #fff !important; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }