@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800&display=swap');

/* Lenguaje visual de HardenWare: fondo oscuro, texto de alto contraste,
   ambar de la marca sólo como acento. El boton que manda es hueso, no
   ambar: sobre negro es lo que mas contrasta y lo que lleva el ojo.

   TODO COLOR VIVE ACA. Si una pagina escribe un color a mano, se desalinea
   la proxima vez que se toque la paleta (Daniel, 2026-09-03). */
:root {
  color-scheme: dark;

  --ground:#0B0D0E; --ground-2:#121517; --panel:#16191C; --campo:#101315;
  --rule:#2A2F33; --rule-2:#22262A; --borde:#3A4045;

  /* La escala de texto arranca casi blanca y no baja de un gris que se lee
     de lejos: es una pantalla de taller, no una revista. */
  --ink:#F2EEE8; --ink-2:#C2C7CC; --ink-3:#9AA0A6; --ink-4:#7C8288;

  --accent:#E5A45A; --accent-2:#F2BC7C; --accent-dim:#8A6636;
  --hueso:#EFE9E1;
  --ok:#5FD08A; --ok-fondo:#12211A;
  --mal:#FF6B60; --mal-borde:#5A2A26; --mal-fondo:#221312;

  --sans:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --display:'Archivo','IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  /* EL ANCHO DE LA PAGINA, EN UN SOLO LUGAR. La cabecera y el contenido
     se alinean contra esta medida: si una pantalla necesita mas ancho,
     pisa esta variable y se corren las dos juntas, no una sola
     (Daniel, 2026-09-03). */
  --ancho:1280px;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--ground); color:var(--ink); font-family:var(--sans);
       font-size:15px; -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-decoration:none; }
a:hover { color:var(--accent-2); }
button { font:inherit; cursor:pointer; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
::placeholder { color:var(--ink-4); opacity:1; }

/* --- cabecera --- */
/* El fondo va de borde a borde, pero lo de adentro se para en la misma
   linea que el contenido: el nombre del usuario tiene que caer justo
   arriba del borde derecho de las cajas, no contra el vidrio. */
.barra { height:64px; background:var(--ground-2); color:var(--ink); display:flex; align-items:center;
         justify-content:space-between; border-bottom:1px solid var(--rule);
         padding:0 max(32px, calc((100% - var(--ancho)) / 2 + 32px)); }
/* El lado izquierdo de la barra: marca y solapas. Va como clase y no
   escrito en el HTML, porque en el celular tiene que cambiar de fila a
   columna, y un estilo escrito a mano le gana a la hoja (Daniel, 2026-09-03). */
.barra-izq { display:flex; align-items:center; }
.marca { font-family:var(--display); font-size:15px; font-weight:700; letter-spacing:.16em;
         color:var(--ink); }
.nav { display:flex; gap:28px; font-size:14px; margin-left:40px; }
.nav a { color:var(--ink-2); padding:22px 0 20px; border-bottom:2px solid transparent; }
.nav a.on { color:var(--ink); font-weight:600; border-bottom-color:var(--accent); }
.nav a:hover { color:var(--ink); }
.usuario { display:flex; align-items:center; gap:12px; font-size:14px; color:var(--ink-2);
           position:relative; }
.inicial { width:32px; height:32px; border-radius:3px; background:#2A2F33; color:var(--ink);
           display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600;
           flex-shrink:0; }
/* El chip lleva el ambar de fondo con letra oscura: al reves no se lee. */
.chip { font-family:var(--mono); font-size:11px; letter-spacing:.1em; font-weight:600;
        color:#101314; background:var(--accent); padding:4px 8px; border-radius:3px; }

/* El menú de la esquina: quién está adentro, sus datos y por dónde se sale. */
.yo { display:flex; align-items:center; gap:10px; background:none; border:0; padding:6px 8px;
      border-radius:3px; color:var(--ink-2); font-size:14px; }
.yo:hover, .yo.on { background:#22262A; color:var(--ink); }
.yo .inicial { background:#31363A; }
.yo:hover .inicial, .yo.on .inicial { background:var(--accent); color:#101314; }
.yo-nombre { max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.yo-flecha { width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent;
             border-top:5px solid currentColor; opacity:.7; }

.menu { position:absolute; top:calc(100% + 6px); right:0; z-index:20; min-width:236px;
        background:var(--panel); border:1px solid var(--rule); border-radius:3px;
        box-shadow:0 18px 40px rgba(0,0,0,.6); overflow:hidden; padding:6px 0; }
.menu-cabeza { display:flex; flex-direction:column; gap:2px; padding:12px 16px;
               border-bottom:1px solid var(--rule-2); margin-bottom:6px; }
.menu-cabeza strong { font-size:14px; color:var(--ink); }
.menu-cabeza span { font-size:12px; color:var(--ink-3); }
.menu a, .menu button { display:block; width:100%; text-align:left; padding:11px 16px;
        font-size:14px; color:var(--ink-2); background:none; border:0; }
.menu a:hover, .menu button:hover { background:var(--ground-2); color:var(--ink); }
.menu a.on { color:var(--accent); font-weight:600; }
.menu button.mal { color:var(--mal); border-top:1px solid var(--rule-2); margin-top:6px; }
.menu button.mal:hover { background:var(--mal-fondo); color:var(--mal); }

/* --- estructura --- */
main { padding:36px 32px; display:flex; flex-direction:column; gap:24px;
       width:100%; max-width:var(--ancho); margin:0 auto; }
h1 { font-family:var(--display); font-size:24px; font-weight:700; letter-spacing:-.01em; margin:0; }
.caja { background:var(--panel); border:1px solid var(--rule); border-radius:3px; overflow:hidden; }
.caja > h2 { font-family:var(--display); margin:0; padding:22px 28px;
             border-bottom:1px solid var(--rule-2); font-size:17px; font-weight:600; }
.cuerpo { padding:26px 28px; display:flex; flex-direction:column; gap:20px; }
.pie { padding:18px 28px; background:var(--ground-2); border-top:1px solid var(--rule-2);
       display:flex; gap:11px; align-items:flex-start; }
.dos { display:grid; grid-template-columns:1.6fr 1fr; gap:24px; align-items:start; }
.entre { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.fila { display:flex; align-items:center; gap:12px; }
.col { display:flex; flex-direction:column; gap:6px; }

/* --- textos --- */
.rot { font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.nota { font-size:13px; line-height:1.6; color:var(--ink-3); }
.mono { font-family:var(--mono); font-size:13px; }
.grande { font-family:var(--mono); font-size:24px; font-weight:600; color:var(--ink); }

/* --- estado --- */
.estado { display:inline-flex; align-items:center; gap:8px; font-size:14px; }
.punto { width:8px; height:8px; border-radius:50%; }
.verde { background:var(--ok); } .rojo { background:var(--mal); }
.tira { border-left:3px solid var(--ok); }
.tira.mal { border-left-color:var(--mal); border-color:var(--mal-borde); }

/* --- tabla --- */
table { width:100%; border-collapse:collapse; }
th { text-align:left; font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
     color:var(--ink-3); background:var(--ground-2); padding:14px 28px; border-bottom:1px solid var(--rule); }
td { padding:18px 28px; border-bottom:1px solid var(--rule-2); color:var(--ink-2); }
td strong, td b { color:var(--ink); }
tr:last-child td { border-bottom:none; }
.vacio { padding:40px 28px; text-align:center; color:var(--ink-3); font-size:14px; }

/* --- formularios --- */
label { display:flex; flex-direction:column; gap:8px; }
label > span { font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
input, select { height:48px; border:1px solid var(--borde); border-radius:3px; background:var(--campo);
                padding:0 14px; font-family:var(--sans); font-size:15px; color:var(--ink); width:100%; }
input:focus, select:focus { outline:none; border-color:var(--accent); background:#141719; }
.campos { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.ancho { grid-column:span 2; }

.btn { height:48px; padding:0 22px; border:1px solid var(--borde); background:transparent; color:var(--ink);
       border-radius:3px; font-size:15px; font-weight:500; display:inline-flex; align-items:center;
       justify-content:center; gap:9px; }
.btn:hover { border-color:var(--ink-3); background:var(--ground-2); }
/* El que manda es hueso con letra oscura: sobre negro no hay nada que
   contraste mas, y el ambar queda libre para avisos y estados. */
.btn.pri { background:var(--hueso); border-color:var(--hueso); color:#101314; font-weight:600; }
.btn.pri:hover { background:#FFFFFF; border-color:#FFFFFF; }
.btn.chico { height:40px; padding:0 16px; font-size:14px; }
.btn.mal { color:var(--mal); border-color:var(--mal-borde); }
.btn.mal:hover { background:var(--mal-fondo); border-color:var(--mal); }
.btn[disabled] { opacity:.45; cursor:default; }

.aviso { padding:14px 16px; border-radius:3px; font-size:14px; line-height:1.5; }
.aviso.obra { background:rgba(229,164,90,.09); color:var(--ink-2); border-left:3px solid var(--accent); }

/* --- modulos: las tarjetas para elegir que se contrata --- */
.modulos { display:flex; flex-direction:column; gap:10px; }
/* flex-direction en fila a mano: `label` de base los pone en columna. */
.modulo { display:flex; flex-direction:row; gap:14px; align-items:flex-start;
          padding:16px 18px; background:var(--panel);
          border:1px solid var(--rule); border-radius:4px; cursor:pointer; }
.modulo:hover { border-color:var(--borde); }
.modulo.elegido { padding:15px 17px; border:2px solid var(--accent); background:rgba(229,164,90,.07); }
.modulo.gris, .modulo.gris:hover { opacity:.5; cursor:default;
          background:var(--campo); border-color:var(--rule-2); }
.modulo input { width:20px; height:20px; margin-top:2px; accent-color:var(--accent); flex:none; }
.modulo-nombre { font-size:16px; font-weight:600; line-height:1.35; color:var(--ink); }
.modulo-precio { font-family:var(--mono); font-size:13px; color:var(--ink-2); white-space:nowrap;
          text-align:right; }
.luego { font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
         color:var(--ink-3); border:1px solid var(--rule); border-radius:2px; padding:3px 8px;
         white-space:nowrap; }
.aviso.mal { background:var(--mal-fondo); color:var(--mal); }
.aviso.ok { background:var(--ok-fondo); color:var(--ok); }
.oculto { display:none !important; }

/* --- entrada (registro / ingreso) --- */
.puerta { display:flex; min-height:100vh; background:var(--ground); }
.puerta .izq { width:460px; background:var(--ground-2); color:var(--ink); padding:56px 48px;
               display:flex; flex-direction:column; justify-content:space-between; flex-shrink:0;
               border-right:1px solid var(--rule); }
/* El logo es la placa cuadrada de la app, la misma del sitio: no se estira. */
.puerta .logo { width:100%; max-width:150px; height:auto; display:block; margin-bottom:4px;
                border-radius:14px; }
.puerta .lema { font-family:var(--display); font-size:27px; line-height:1.32; font-weight:600;
                max-width:330px; text-wrap:pretty; }
/* Los tres verbos son el ritmo de la frase: van en el ambar de la marca,
   que es el mismo del "WARE" del logo que quedo justo arriba. */
.puerta .lema em { font-style:normal; font-weight:700; color:var(--accent); }
/* El canal de YouTube, debajo del lema en la puerta de ingreso (Daniel, 2026-09-06). */
.puerta .youtube { display:flex; align-items:center; gap:14px; margin-top:34px; max-width:340px;
  color:var(--ink-2); font-size:15px; line-height:1.5; text-decoration:none; }
.puerta .youtube svg { width:40px; height:28px; flex:none; }
.puerta .youtube:hover { color:var(--ink); }
.puerta .regla { width:44px; height:3px; background:var(--accent); margin:22px 0 30px; }
.puerta .der { flex-grow:1; padding:56px 64px; display:flex; flex-direction:column; gap:28px;
               justify-content:center; }
.puerta .der .titulo { font-family:var(--display); font-size:28px; font-weight:700; letter-spacing:-.01em; }

/* --- ventana de activación --- */
.fondo { position:fixed; inset:0; background:rgba(0,0,0,.72); display:flex;
         align-items:center; justify-content:center; padding:24px; z-index:10; }
.ventana { width:640px; max-width:100%; background:var(--panel); border:1px solid var(--rule);
           border-radius:4px; overflow:hidden; box-shadow:0 24px 60px -20px rgba(0,0,0,.8); }
.digitos { display:flex; gap:10px; }
.digitos input { width:62px; height:74px; text-align:center; font-family:var(--mono);
                 font-size:32px; font-weight:500; padding:0; }
.pasos { display:flex; flex-direction:column; gap:14px; }
.paso { display:flex; gap:14px; align-items:flex-start; font-size:15px; line-height:1.55; color:var(--ink-2); }
.paso b { width:24px; height:24px; border-radius:50%; background:var(--accent); color:#101314; font-size:13px;
          font-weight:600; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

@media (max-width:860px) {
  .dos { grid-template-columns:1fr; }
  .campos { grid-template-columns:1fr; }
  .ancho { grid-column:span 1; }
  .puerta { flex-direction:column; }
  .puerta .izq { width:100%; padding:32px; border-right:none; border-bottom:1px solid var(--rule); }
  .puerta .der { padding:32px; }
  main { padding:24px 16px; }
  th, td { padding:14px 16px; }

  /* La barra no entra de una sola línea en un celular: se apila, y las
     solapas se deslizan de costado en vez de amontonarse. */
  .barra { height:auto; flex-direction:column; align-items:stretch; padding:0; }
  .barra-izq { flex-direction:column; align-items:flex-start; }
  .marca { padding:14px 16px 0; }
  .nav { margin-left:0; gap:20px; width:100%; padding:0 16px;
         overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .nav::-webkit-scrollbar { display:none; }
  .nav a { padding:12px 0 10px; white-space:nowrap; }
  .usuario { padding:0 16px 12px; }
  /* La barra apilada deja el menú pegado al borde; que respete el margen. */
  .menu { right:16px; left:16px; min-width:0; }
  .yo-nombre { max-width:none; }

  /* Las tablas se deslizan solas de costado; la página nunca. */
  .caja { overflow-x:auto; }
  table { min-width:560px; }

  /* Los seis dígitos entran justos en 375 px. */
  .digitos { gap:6px; }
  .digitos input { width:calc((100% - 30px) / 6); min-width:0; height:64px; font-size:26px; }
  .ventana { width:100%; }
  .entre { flex-wrap:wrap; }
}

  /* PERMISOS: lista compacta y agrupada. `label` es columna y pone el texto
     en mayusculas -- sirve para los campos de un formulario, no para una
     lista de tildes -- asi que se anula (Daniel, 2026-09-02). */
  .permisos { display:flex; flex-direction:column; gap:2px; }
  .permisos .rot { margin-top:10px; }
  .permisos .rot:first-child { margin-top:0; }
  .permiso { display:flex; flex-direction:row; align-items:center; gap:9px;
             padding:3px 0; cursor:pointer; }
  .permiso span { font-size:14px; font-weight:400; letter-spacing:0;
                  text-transform:none; color:var(--ink); }
  /* `input` de la hoja es para los campos de un formulario: 48 px de alto y
     ancho completo. Aplicado a una tilde queda un cuadrado enorme con el
     texto perdido a la derecha, que es como salio la primera vez
     (Daniel, 2026-09-03: "quedo como el orto"). Hay que anular las tres. */
  .permiso input[type="checkbox"] {
    width:17px; height:17px; min-width:17px; flex:none;
    margin:0; padding:0; border-radius:3px; accent-color:var(--accent);
  }
  .permiso span { flex:1; }

/* --- legales: terminos y politica de privacidad --- */
/* Se abre en ventana aparte desde el registro, sin sesion: no hay `.barra`
   ni usuario. La columna es angosta a proposito -- son parrafos largos y a
   1280 px de ancho no se leen. El MISMO marcado se manda por mail, donde lo
   pinta la hoja de `correo.py`: las clases de aca son solo la cara web. */
.legal-hoja { background:var(--ground); }

.legal-cabeza { background:var(--ground-2); border-bottom:1px solid var(--rule); }
.legal-cabeza-dentro { max-width:820px; margin:0 auto; padding:20px 32px;
       display:flex; align-items:center; justify-content:space-between; gap:16px; }
.legal-lema { font-size:13px; color:var(--ink-3); margin-top:5px; }

.legal-nav { position:sticky; top:0; z-index:5; background:var(--ground);
       border-bottom:1px solid var(--rule-2); }
.legal-nav-dentro { max-width:820px; margin:0 auto; padding:14px 32px;
       display:flex; flex-wrap:wrap; align-items:center; gap:12px 26px; }
.legal-nav a { font-size:13px; color:var(--ink-2); border-bottom:1px solid transparent;
       padding-bottom:2px; }
.legal-nav a:hover { color:var(--accent); border-bottom-color:var(--accent); }
.legal-version { color:var(--ink-4); letter-spacing:.08em; margin-left:auto; }

.legal-cuerpo { max-width:820px; padding:8px 32px 72px; gap:0; }

.legal-doc { scroll-margin-top:60px; padding-top:44px; }
.legal-doc > h2 { font-family:var(--display); font-size:24px; font-weight:700;
       letter-spacing:-.01em; margin:0 0 6px; padding-bottom:16px;
       border-bottom:2px solid var(--accent); }

.clausula { margin-top:30px; }
.clausula h3 { font-family:var(--display); font-size:16px; font-weight:600;
       color:var(--ink); margin:0 0 10px; }
/* El numero de clausula en ambar y en mono: es lo que se busca con el dedo
   cuando alguien dice "mira la sexta". */
.clausula-n { font-family:var(--mono); font-size:14px; font-weight:600;
       color:var(--accent); margin-right:7px; }
.clausula p, .clausula li { font-size:15px; line-height:1.72; color:var(--ink-2);
       max-width:68ch; }
.clausula p { margin:0 0 12px; }
.clausula p:last-child { margin-bottom:0; }
.clausula ul { margin:0 0 12px; padding-left:20px; }
.clausula li { margin-bottom:7px; }
.clausula strong { color:var(--ink); font-weight:600; }
/* Los dos parrafos que la ley obliga a reproducir textuales: se marcan como
   cita para que se vea que no son redaccion nuestra. */
.clausula p.cita { border-left:2px solid var(--rule); padding-left:16px;
       color:var(--ink-3); font-style:italic; font-size:14px; }

.legal-pie { margin-top:56px; padding-top:20px; border-top:1px solid var(--rule-2);
       font-size:12px; line-height:1.7; color:var(--ink-4); }

/* El tilde de aceptacion del registro. `label` de base apila y grita en
   mayusculas: sirve para un campo, no para una tilde con un texto al lado. */
.acepto { display:flex; flex-direction:row; align-items:flex-start; gap:12px;
       padding:13px 15px; background:var(--panel); border:1px solid var(--rule);
       border-radius:3px; cursor:pointer; }
.acepto:hover { border-color:var(--borde); }
.acepto input[type="checkbox"] { width:19px; height:19px; min-width:19px; flex:none;
       margin:1px 0 0; padding:0; border-radius:3px; accent-color:var(--accent); }
.acepto span { font-size:14px; font-weight:400; letter-spacing:0; text-transform:none;
       color:var(--ink-2); line-height:1.5; }
.acepto a { text-decoration:underline; text-underline-offset:2px; }

@media (max-width:860px) {
  .legal-cabeza-dentro, .legal-nav-dentro { padding-left:16px; padding-right:16px; }
  .legal-cuerpo { padding-left:16px; padding-right:16px; }
  .legal-version { margin-left:0; width:100%; }
}

/* LAS CNC DEL REGISTRO (Daniel, 2026-10-10): una tarjeta por maquina, con
   marca, modelo, formato y los archivos de ejemplo. */
.cnc { display:flex; flex-direction:column; gap:18px; padding:18px 20px;
       background:var(--panel); border:1px solid var(--rule); border-radius:4px; }
.cnc-formato-rot { font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.cnc-formatos { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:8px 18px; }
.cnc-opcional { text-transform:none; letter-spacing:0; font-weight:400; }
.cnc-subir input[type="file"] { height:auto; padding:10px 12px; font-size:14px; }
.cnc-barra { height:6px; margin-top:8px; background:var(--campo); border-radius:3px; overflow:hidden; }
.cnc-barra > div { height:100%; background:var(--accent); transition:width .2s; }
#obsCnc textarea, #obsTexto { min-height:120px; padding:12px 14px; border:1px solid var(--borde);
       border-radius:3px; background:var(--campo); color:var(--ink); font:inherit;
       font-size:15px; line-height:1.5; resize:vertical; }
#obsCnc textarea:focus, #obsTexto:focus { outline:none; border-color:var(--accent); }
.cnc-no-tengo.elegido { border:2px solid var(--accent); background:rgba(229,164,90,.07); }

@media (max-width:860px) {
  .cnc .campos { grid-template-columns:minmax(0,1fr); }
}

/* Los grupos del registro que se prenden y apagan juntos (pais, contacto). */
fieldset { border:0; padding:0; margin:0; min-width:0; }

/* La ruedita de "está pensando": consulta a ARCA y otras esperas cortas. */
.girando { width:18px; height:18px; flex:none; border:2px solid var(--borde);
       border-top-color:var(--accent); border-radius:50%; animation:girar .8s linear infinite; }
@keyframes girar { to { transform:rotate(360deg); } }

/* --- las ventanitas de aviso, pregunta y dato (static/dialogo.js) --- */
.dlg-fondo { position:fixed; inset:0; z-index:1000; background:rgba(5,6,7,.66);
             display:flex; align-items:center; justify-content:center; padding:16px;
             animation:dlg-entra .12s ease-out; }
.dlg { width:100%; max-width:440px; background:var(--panel); border:1px solid var(--borde);
       border-top:3px solid var(--accent); border-radius:4px; padding:22px 22px 18px;
       box-shadow:0 18px 48px rgba(0,0,0,.55); display:flex; flex-direction:column; gap:16px; }
.dlg-texto { font-size:15px; line-height:1.55; color:var(--ink); white-space:pre-line; }
.dlg-campo { width:100%; height:44px; padding:0 12px; color:var(--ink); font:inherit;
             font-family:var(--mono); font-size:15px; }
.dlg-botones { display:flex; justify-content:flex-end; gap:10px; }
@keyframes dlg-entra { from { opacity:0; } to { opacity:1; } }