:root{
  /* Paleta formal en verde oscuro */
  --verde-900:#08241b;
  --verde-800:#0d3226;
  --verde-700:#134231;
  --verde-600:#1a5540;
  --verde-500:#227054;
  --oro:#c8a24a;
  --oro-claro:#e0c27e;

  --papel:#fbfaf6;
  --papel-2:#f4f2ea;
  --ink:#16201c;
  --ink-soft:#5c6a63;
  --line:#dcd9cd;
  --ok:#1a7a4c;
  --bad:#b32430;

  --radius:6px;
  --shadow:0 2px 4px rgba(4,20,14,.14), 0 24px 48px -20px rgba(4,20,14,.55);
  --serif:Georgia,"Times New Roman",Cambria,serif;
  --sans:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
[hidden]{display:none !important}

body{
  font-family:var(--sans);
  color:var(--ink);
  line-height:1.55;
  background-color:var(--verde-800);
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:lining-nums;
}

/* Fondo corporativo: degradado verde profundo + marca de agua muy tenue */
.fondo-mx{
  background-image:
    url("../img/mapa-mexico.svg"),
    url("../img/patron-mexico.svg"),
    linear-gradient(160deg, var(--verde-800) 0%, var(--verde-900) 100%);
  background-repeat:no-repeat, repeat, no-repeat;
  background-position:center 44%, top left, center;
  background-size:min(70vw,760px) auto, 460px 240px, cover;
  background-attachment:fixed, fixed, fixed;
}
/* Marca de agua contenida: casi imperceptible, tono corporativo */
.fondo-mx::before{
  content:"";
  position:fixed;inset:0;z-index:0;
  background:radial-gradient(ellipse at 50% 30%, rgba(8,36,27,0) 0%, rgba(8,36,27,.55) 78%);
  pointer-events:none;
}
.fondo-mx > *{position:relative;z-index:1}

/* ---------- Layout ---------- */
.pantalla{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:40px 16px;
}

.encabezado{text-align:center;max-width:640px;margin-bottom:38px}
.escudo{
  width:52px;height:52px;margin:0 auto 20px;
  border:1px solid rgba(200,162,74,.5);
  border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  color:var(--oro);
  font-family:var(--serif);
  font-size:19px;font-weight:700;
  letter-spacing:.04em;
  background:rgba(255,255,255,.03);
}
.marca{
  font-size:11px;
  letter-spacing:.4em;
  text-transform:uppercase;
  color:var(--oro);
  font-weight:600;
  margin-bottom:16px;
}
.encabezado h1{
  font-family:var(--sans);
  font-size:27px;line-height:1.28;letter-spacing:-.01em;
  color:#fff;margin:0 auto 12px;font-weight:600;max-width:15ch;
}
.encabezado .sub{color:rgba(255,255,255,.55);margin:0;font-size:15px;font-weight:400}

/* ---------- Dos ventanas corporativas lado a lado ---------- */
.opciones{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  width:100%;
  max-width:820px;
}
.ventana{
  background:#ffffff;
  border:1px solid #e4e7ec;
  border-radius:4px;
  box-shadow:0 1px 2px rgba(4,20,14,.10), 0 18px 40px -24px rgba(4,20,14,.5);
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position:relative;
  overflow:hidden;
}
/* Franja lateral de acento (sobria, tipo portal corporativo) */
.ventana::before{
  content:"";position:absolute;top:0;left:0;bottom:0;width:3px;background:#c3c8d0;
  transition:background .18s ease;
}
.ventana.acento::before{background:var(--verde-600)}
.ventana:hover{
  transform:translateY(-3px);
  border-color:#cbd2da;
  box-shadow:0 2px 4px rgba(4,20,14,.12), 0 26px 52px -24px rgba(4,20,14,.6);
}
.ventana:hover::before{background:var(--verde-700)}
.ventana.acento:hover::before{background:var(--verde-500)}

.ventana-cuerpo{padding:24px 24px 22px;flex:1}
.ventana h2{
  font-family:var(--sans);font-weight:600;
  font-size:18px;line-height:1.3;margin:0 0 8px;color:var(--verde-800);letter-spacing:-.01em;
}
.ventana p{color:var(--ink-soft);font-size:14px;line-height:1.55;margin:0}
.ventana .llamado{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--verde-700);
  border-top:1px solid var(--line);
  padding:16px 24px;
}
.ventana .flecha{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
.ventana:hover .flecha{transform:translateX(3px)}
/* Opción 2: llamado como botón primario corporativo */
.ventana.acento .llamado{
  background:var(--verde-700);color:#fff;border-top-color:var(--verde-700);
}
.ventana.acento:hover .llamado{background:var(--verde-600)}

/* ---------- Tarjeta interior (contacto / formulario) ---------- */
.tarjeta{
  width:100%;
  max-width:560px;
  background:var(--papel);
  border:1px solid rgba(200,162,74,.35);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:40px 36px;
  position:relative;
}
.tarjeta::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--oro)}
.tarjeta .marca{color:var(--verde-600)}
.tarjeta h1{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.25;margin:0 0 8px;color:var(--verde-800)}
.tarjeta .sub{color:var(--ink-soft);margin:0 0 26px;font-size:15px}
h2{font-size:19px;margin:0 0 6px}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:13px 20px;
  border-radius:var(--radius);
  border:1px solid transparent;
  font:inherit;font-size:14px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;text-decoration:none;
  transition:background .15s, border-color .15s, color .15s, transform .05s;
}
.btn:active{transform:translateY(1px)}
.btn-primario{background:var(--verde-700);color:#fff}
.btn-primario:hover{background:var(--verde-600)}
.btn-secundario{background:transparent;color:var(--verde-700);border-color:var(--line)}
.btn-secundario:hover{border-color:var(--verde-600);background:var(--papel-2)}
.btn-peligro{background:#fff;color:var(--bad);border-color:#e6c6c9}
.btn-peligro:hover{background:#fdf4f5}
.btn-chico{width:auto;padding:9px 14px;font-size:12px}
.btn:disabled{opacity:.6;cursor:not-allowed}

.pie{margin-top:26px;text-align:center;font-size:13.5px}
.pie a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--line)}
.pie a:hover{color:var(--verde-600)}
.pie-fondo{margin-top:30px;text-align:center;font-size:12px;color:rgba(255,255,255,.4);letter-spacing:.1em;text-transform:uppercase}

/* ---------- Datos de contacto (Opcion 1) ---------- */
.lista-datos{border-top:1px solid var(--line);margin:0 0 24px}
.lista-datos .fila{
  display:flex;justify-content:space-between;gap:16px;
  padding:14px 2px;border-bottom:1px solid var(--line);
}
.lista-datos .et{color:var(--ink-soft);font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.lista-datos .va{font-weight:600;text-align:right;font-family:var(--sans);font-size:17px;color:var(--verde-800);font-variant-numeric:lining-nums tabular-nums;letter-spacing:.02em}

.aviso{
  background:var(--verde-700);
  border:1px solid var(--verde-600);
  color:var(--oro-claro);
  border-radius:var(--radius);
  padding:15px 16px;text-align:center;font-weight:600;
  font-family:var(--serif);font-size:17px;letter-spacing:.04em;
}

/* ---------- Formulario ---------- */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.campo{display:flex;flex-direction:column;gap:6px}
.campo.full{grid-column:1 / -1}
.campo label{font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft)}
.campo .req{color:var(--bad)}
.campo input{
  font:inherit;font-size:15px;padding:11px 13px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:#fff;color:var(--ink);width:100%;
}
.campo input:focus{outline:none;border-color:var(--verde-600);box-shadow:0 0 0 3px rgba(26,85,64,.13)}
.campo input.malo{border-color:var(--bad);box-shadow:0 0 0 3px rgba(179,36,48,.1)}
.campo .error{font-size:12.5px;color:var(--bad);min-height:16px}
form .btn{margin-top:22px}

/* ---------- Overlay de carga / resultado ---------- */
.overlay{
  position:fixed;inset:0;
  background:rgba(8,36,27,.96);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;
  z-index:50;
}
.overlay[hidden]{display:none}
.spinner{
  width:46px;height:46px;
  border:3px solid rgba(255,255,255,.18);
  border-top-color:var(--oro);
  border-radius:50%;
  animation:girar .8s linear infinite;
}
@keyframes girar{to{transform:rotate(360deg)}}
.overlay .etiqueta{color:rgba(255,255,255,.7);font-size:13px;letter-spacing:.18em;text-transform:uppercase}

.resultado{text-align:center;max-width:400px;padding:0 16px;animation:entrar .3s ease}
@keyframes entrar{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.icono{width:88px;height:88px;border-radius:50%;margin:0 auto 20px;display:flex;align-items:center;justify-content:center}
.icono svg{width:44px;height:44px;stroke-width:3.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.icono.ok{background:rgba(42,190,124,.13);border:1px solid rgba(42,190,124,.35)}
.icono.ok svg{stroke:#37d68f}
.icono.bad{background:rgba(226,74,88,.13);border:1px solid rgba(226,74,88,.4)}
.icono.bad svg{stroke:#ef5f6d}
.icono svg path,.icono svg line{stroke-dasharray:60;stroke-dashoffset:60;animation:trazo .45s ease forwards .05s}
.icono svg line:nth-child(2){animation-delay:.2s}
@keyframes trazo{to{stroke-dashoffset:0}}
.resultado h2{font-family:var(--serif);font-weight:400;font-size:24px;margin-bottom:8px;color:#fff}
.resultado p{color:rgba(255,255,255,.62);margin:0 0 24px}
.resultado .btn-secundario{color:var(--oro);border-color:rgba(200,162,74,.4)}
.resultado .btn-secundario:hover{background:rgba(200,162,74,.1);border-color:var(--oro)}

/* ---------- Acceso por PIN ---------- */
.candado{
  width:52px;height:52px;margin:0 auto 18px;border-radius:50%;
  border:1px solid var(--line);background:var(--papel-2);
  display:flex;align-items:center;justify-content:center;
}
.candado svg{width:22px;height:22px;fill:none;stroke:var(--verde-600);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#pin-input{
  text-align:center;letter-spacing:.42em;font-size:18px;font-family:var(--sans);
  padding:13px;width:100%;border:1px solid var(--line);border-radius:var(--radius);background:#fff;
}
#pin-input:focus{outline:none;border-color:var(--verde-600);box-shadow:0 0 0 3px rgba(26,85,64,.13)}
#pin-error{color:var(--bad);font-size:13.5px;min-height:20px;text-align:center;margin:10px 0 0}

/* ---------- Panel de administracion ---------- */
.panel-top{
  background:var(--verde-800);
  border-bottom:2px solid var(--oro);
  padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  color:#fff;
}
.panel-top strong{font-family:var(--serif);font-weight:400;font-size:17px;letter-spacing:.04em}
.panel-top .acciones{display:flex;gap:8px;flex-wrap:wrap}
.panel-top .btn-secundario{color:var(--oro-claro);border-color:rgba(200,162,74,.4)}
.panel-top .btn-secundario:hover{background:rgba(200,162,74,.12);border-color:var(--oro)}
.panel-top .btn-primario{background:var(--oro);color:var(--verde-900)}
.panel-top .btn-primario:hover{background:var(--oro-claro)}
.panel-top .btn-peligro{background:transparent;color:#f09aa2;border-color:rgba(240,154,162,.35)}
.panel-top .btn-peligro:hover{background:rgba(240,154,162,.1)}

body.panel{background:var(--papel-2)}
.panel-wrap{max-width:1040px;margin:0 auto;padding:24px 16px 60px}

.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px}
.tab{
  padding:9px 15px;border-radius:999px;border:1px solid var(--line);
  background:#fff;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;color:var(--ink-soft);
}
.tab.activo{background:var(--verde-700);border-color:var(--verde-700);color:#fff}

.bloque{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin-bottom:18px}
.bloque > h2{font-family:var(--serif);font-weight:400;color:var(--verde-800);margin-bottom:4px}
.bloque > .sub{margin:0 0 18px;color:var(--ink-soft);font-size:14px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ctrl{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.ctrl label{font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft)}
.ctrl input,.ctrl select{
  font:inherit;font-size:14.5px;padding:9px 11px;
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--ink);width:100%;
}
.ctrl input:focus,.ctrl select:focus{outline:none;border-color:var(--verde-600)}
.check{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.check input{width:auto}
.fila-checks{display:flex;align-items:center;gap:10px 22px;flex-wrap:wrap}
.limite-max{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-soft)}
.limite-max input{
  width:78px;font:inherit;font-size:14.5px;padding:6px 9px;
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--ink);
}
.limite-max input:focus{outline:none;border-color:var(--verde-600)}

.item{border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:12px;background:var(--papel)}
.item-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.item-head .n{font-size:11.5px;font-weight:700;color:var(--verde-600);text-transform:uppercase;letter-spacing:.12em}
.item-head .bts{display:flex;gap:6px}
.icon-btn{
  border:1px solid var(--line);background:#fff;border-radius:var(--radius);width:30px;height:30px;
  cursor:pointer;font-size:14px;line-height:1;color:var(--ink-soft);
}
.icon-btn:hover{border-color:var(--verde-600)}
.icon-btn.del:hover{color:var(--bad);border-color:#e6c6c9}

.radio-fila{display:flex;gap:10px;flex-wrap:wrap}
.radio-op{
  flex:1;min-width:180px;border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;
  cursor:pointer;background:#fff;display:flex;gap:10px;align-items:flex-start;
}
.radio-op.sel{border-color:var(--verde-600);box-shadow:0 0 0 3px rgba(26,85,64,.1)}
.radio-op small{display:block;color:var(--ink-soft);font-weight:400}
.radio-op b{font-size:14.5px}

table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft)}
.tabla-scroll{overflow-x:auto}
.vacio{color:var(--ink-soft);text-align:center;padding:28px 10px}

.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  background:var(--verde-800);color:var(--oro-claro);padding:11px 22px;border-radius:999px;font-size:14px;
  box-shadow:var(--shadow);z-index:80;
}
.toast[hidden]{display:none}

@media (max-width:760px){
  .opciones{grid-template-columns:1fr}
  .encabezado h1{font-size:26px}
  .tarjeta{padding:30px 22px}
  .grid,.grid-2{grid-template-columns:1fr}
  .panel-wrap{padding:20px 12px 50px}
  .fondo-mx{background-attachment:scroll,scroll,scroll;background-size:min(120vw,620px) auto,300px 158px,cover}

  /* Pantalla inicial: todo cabe en una sola vista de celular */
  .pantalla:has(.opciones){padding:18px 16px}
  .encabezado{margin-bottom:18px}
  .escudo{width:40px;height:40px;margin-bottom:10px;font-size:15px}
  .encabezado .marca{margin-bottom:8px}
  .encabezado h1{font-size:22px;margin-bottom:6px;max-width:20ch}
  .encabezado .sub{font-size:14px}
  .opciones{gap:12px}
  .ventana-cuerpo{padding:16px 18px 14px}
  .ventana h2{font-size:17px;margin-bottom:4px}
  .ventana p{font-size:13.5px;line-height:1.45}
  .ventana .llamado{padding:12px 18px}
  .pie-fondo{margin-top:14px}
}

/* Celulares bajitos (p. ej. 360x640 con barras del navegador) */
@media (max-width:760px) and (max-height:680px){
  .pantalla:has(.opciones){padding:12px 16px}
  .escudo{display:none}
  .encabezado{margin-bottom:12px}
  .encabezado h1{font-size:20px}
  .ventana-cuerpo{padding:12px 16px 10px}
  .ventana p{font-size:13px}
  .ventana .llamado{padding:10px 16px;font-size:11.5px}
  .pie-fondo{display:none}
}