/* =============================================================================
   DiskVigía — site.css (v1.0, 2026-08-20)
   Hoja de estilos COMPARTIDA para todas las páginas del sitio público.
   Antes cada página repetía su propio <style> completo (~35 reglas idénticas
   en 22 archivos) — desde ahora el diseño base vive en un solo lugar. Cada
   página conserva un <style> local pequeño SOLO con lo que le es propio
   (ancho de .env, tipografía de su h1, componentes exclusivos de esa vista).
   ============================================================================= */

:root{
  --tinta:#0B1E2D; --tinta2:#13324A; --papel:#F5F8FA; --blanco:#FFFFFF;
  --cian:#0FB5C9; --cian-b:#22D3EE; --acento:#F4A340; --linea:#DDE7EE;
  --tx:#0B1E2D; --tx2:#5C7080; --ok:#16A34A; --alerta:#DC2626;
}

/* --- Reset y base --- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;color:var(--tx);background:var(--papel);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3{line-height:1.15;letter-spacing:-.02em}
.env{margin:0 auto;padding:0 22px}

/* --- Navegación (idéntica en las 22 páginas) --- */
nav{position:sticky;top:0;z-index:50;background:rgba(245,248,250,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.nav-in{max-width:1080px;margin:0 auto;padding:0 22px;display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-size:21px;font-weight:800;letter-spacing:-.03em;color:var(--tx)}
.logo b{color:var(--cian)}
.volver{color:var(--tx2);font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:6px;transition:.15s}
.volver:hover{color:var(--tx)}
.volver svg{flex:none}

/* --- Estructura de página interior (formularios, cuenta, soporte...) --- */
main{padding:56px 0 70px}
.h-eye{color:var(--cian);font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px}
.lead{color:var(--tx2);margin-bottom:26px}

/* --- Formularios --- */
form{background:var(--blanco);border:1px solid var(--linea);border-radius:16px;padding:30px}
label{display:block;font-size:13.5px;font-weight:700;margin-bottom:6px;margin-top:16px}
label:first-of-type{margin-top:0}
.ayuda{font-size:12.5px;color:var(--tx2);margin-top:4px}
input,select,textarea{width:100%;border:1.5px solid var(--linea);border-radius:9px;padding:11px 13px;font-size:14.5px;font-family:inherit;color:var(--tx);background:var(--papel)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--cian)}
textarea{resize:vertical;min-height:110px}
.hp{position:absolute!important;left:-9999px!important;top:-9999px!important;width:1px!important;height:1px!important}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.politica{display:flex;align-items:flex-start;gap:10px;margin-top:18px;font-size:13.5px;color:var(--tx2)}
.politica input{width:auto;margin-top:3px}
.politica a{color:var(--cian);font-weight:700}
.radios{display:flex;gap:18px;margin-top:6px;font-size:14.5px}
.radios label{display:flex;align-items:center;gap:8px;margin:0;font-weight:600}
.radios input{width:auto}

/* --- Pestañas (crear-cuenta.html, soporte.html) --- */
.pestanas{display:flex;gap:6px;background:#E7EEF2;border-radius:999px;padding:5px;margin-bottom:26px;max-width:fit-content}
.pestana{border:0;background:transparent;padding:10px 20px;border-radius:999px;font-size:14px;font-weight:700;color:var(--tx2);cursor:pointer;font-family:inherit;transition:.15s}
.pestana.activa{background:var(--cian);color:#fff}
.panel-tab{display:none}
.panel-tab.activo{display:block}

/* --- Botones --- */
.btn{display:inline-block;background:linear-gradient(135deg,var(--cian-b),var(--cian));color:var(--blanco);padding:13px 26px;border-radius:9px;font-weight:700;font-size:15px;border:0;cursor:pointer;margin-top:22px;box-shadow:0 8px 20px -8px var(--cian);transition:.18s;text-align:center}
.btn:hover{transform:translateY(-1px)}
.btn:disabled{opacity:.6;cursor:default;transform:none}
.btn.sec{background:#E7EEF2;color:var(--tx);box-shadow:none}
.btn.mini{padding:8px 16px;font-size:13px;margin-top:12px}
.btn-google{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--linea);border-radius:9px;padding:11px 22px;font-size:14.5px;font-weight:700;color:var(--tx);cursor:pointer;font-family:inherit}
.btn-google:hover{border-color:var(--cian)}
.btn-salir{border:1.5px solid var(--linea);background:transparent;color:var(--tx2);padding:7px 14px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.btn-salir:hover{border-color:var(--alerta);color:var(--alerta)}

/* Botones de nav (index/landing): sólidos y de contorno */
.btn-g{background:linear-gradient(135deg,var(--cian-b),var(--cian));box-shadow:0 8px 20px -8px var(--cian);color:#fff}
.btn-o{background:transparent;color:var(--tx);border:1.5px solid var(--linea);box-shadow:none}
.btn-o:hover{border-color:var(--cian);background:transparent}

/* --- Mensajes de estado --- */
.msg{margin-top:16px;font-size:14px;font-weight:600;padding:12px 14px;border-radius:9px;display:none}
.msg.ok{display:block;background:rgba(22,163,74,.12);color:#166534}
.msg.err{display:block;background:rgba(220,38,38,.1);color:#991B1B}
.aviso{background:#FFF8EC;border:1px solid #F4D8A8;border-radius:14px;padding:18px 22px;margin-bottom:26px;font-size:14.5px}
.aviso b{color:#8A5A00}

/* --- Enlace alterno al pie de un formulario --- */
.alt{margin-top:26px;font-size:13.5px;color:var(--tx2)}
.alt a{color:var(--cian);font-weight:700}

/* --- Hilos de conversación (soporte.html, mi-cuenta.html) --- */
.hilo{margin-top:18px}
.burbuja{border-radius:12px;padding:12px 16px;margin-bottom:10px;font-size:14px;white-space:pre-wrap}
.burbuja.cliente{background:#EFF6F9;border:1px solid var(--linea)}
.burbuja.soporte{background:#F0F9FB;border:1px solid #BEE3EA}
.burbuja .quien{font-size:11.5px;color:var(--tx2);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px;font-weight:700}
.estado-chip,.chip{display:inline-block;font-size:12.5px;font-weight:700;padding:4px 12px;border-radius:999px}
.estado-abierto{background:#FEF3E2;color:#8A5A00}
.estado-respondido,.chip-ok{background:#E0F2FE;color:#075985}
.estado-cerrado{background:#E5E7EB;color:#374151}
.chip-alerta{background:#FEE2E2;color:#991B1B}

/* --- Tarjetas de datos (mi-cuenta.html) --- */
.card{background:var(--blanco);border:1px solid var(--linea);border-radius:16px;padding:24px 26px;margin-bottom:18px}
.card h3{font-size:15px;margin-bottom:14px}
.fila-dato{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid var(--linea);font-size:14px}
.fila-dato:last-child{border-bottom:0}
.fila-dato .k{color:var(--tx2)}
.fila-dato .v{font-weight:700;text-align:right}

/* --- Footer de páginas interiores/legales/blog --- */
footer{border-top:1px solid var(--linea);padding:30px 0;color:var(--tx2);font-size:13px;text-align:center}
footer a{color:var(--tx2)}

/* --- Blog: listado y artículos (compartido por 10 páginas) --- */
.kicker{color:var(--cian);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px}
article{padding:48px 0 20px}
.meta{color:var(--tx2);font-size:13.5px;margin-bottom:32px}
article h2{font-size:23px;font-weight:800;margin:34px 0 12px;color:var(--tinta)}
article h3{font-size:18px;font-weight:700;margin:22px 0 8px}
article p{margin-bottom:16px;font-size:16.5px}
article ul,article ol{margin:0 0 16px 22px}
article li{margin-bottom:8px;font-size:16.5px}
article table{width:100%;border-collapse:collapse;margin:20px 0;font-size:14.5px}
article th,article td{border:1px solid var(--linea);padding:9px 12px;text-align:left}
article th{background:var(--tinta);color:#fff}
article a{color:var(--cian);text-decoration:none}
article a:hover{text-decoration:underline}
blockquote{border-left:4px solid var(--cian);padding:4px 0 4px 18px;margin:22px 0;color:var(--tx2);font-style:italic;font-size:16px}
.callout{background:var(--blanco);border:1px solid var(--linea);border-left:4px solid var(--cian);border-radius:8px;padding:16px 18px;margin:22px 0}
.callout.alerta{border-left-color:var(--alerta)}
.callout.ok{border-left-color:var(--ok)}
.cta{background:var(--tinta);color:#fff;border-radius:14px;padding:28px;margin:40px 0;text-align:center}
.cta h3{color:#fff;font-size:22px;margin-bottom:10px}
.cta p{color:#B9CBD8;margin-bottom:18px}
.relacionados{margin:40px 0;padding-top:24px;border-top:1px solid var(--linea)}
.relacionados a{display:block;margin-bottom:8px;font-weight:600;color:var(--cian)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;padding:20px 0 60px}
.grid .card{display:flex;flex-direction:column}
.grid .card h2{font-size:19px;font-weight:800;color:var(--tinta);margin-bottom:10px;line-height:1.3}
.grid .card p{color:var(--tx2);font-size:14.5px;margin-bottom:16px;flex-grow:1}
.grid .card a.leer{font-weight:700;font-size:14.5px;color:var(--cian)}

/* --- Utilidades varias --- */
.chip-ok{background:#E0F2FE;color:#075985}