/* AutomateK · página de diagnóstico (/diagnostico).
   Los estilos van aquí y no en el elemento porque la política de seguridad del
   sitio no permite estilos en línea (style-src 'self').
   Julio 2026: la hoja se reescribió con nombres legibles (dg-*) al acortar el
   formulario a nombre, teléfono, email y sector. */
html{color-scheme:only light;forced-color-adjust:none}
*{box-sizing:border-box}
img,svg,canvas,video{max-width:100%}
body{margin:0;background:#F5F5F7;color:#0B0B0C;font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
::selection{background:#1C4BD8;color:#FFFFFF}
a{color:#1C4BD8}a:hover{color:#0B37B8}
:focus-visible{outline:2px solid #1C4BD8;outline-offset:2px;border-radius:4px}
#dgForm input:focus,#dgForm select:focus{border-color:#1C4BD8;outline:none;box-shadow:0 0 0 3px rgba(28,75,216,.14)}
#dgForm input::placeholder{color:#61697A}
@keyframes akpulse{0%,100%{opacity:1}50%{opacity:.35}}

.dg-salto{position:fixed;top:10px;left:10px;z-index:200;transform:translateY(-200%);background:#1C4BD8;color:#FFFFFF;font-weight:600;font-size:14px;line-height:1;padding:13px 20px;border-radius:999px;text-decoration:none;transition:transform .2s cubic-bezier(.22,1,.36,1)}
.dg-salto:focus{transform:translateY(0)}

/* ── Cabecera: solo el logotipo ─────────────────────────────────────── */
.dg-barra{max-width:900px;margin:0 auto;padding:22px clamp(20px,4vw,32px) 0}
.dg-logo{display:inline-flex;align-items:center;gap:2px;min-height:44px;text-decoration:none;color:#0B0B0C}
.dg-logo-txt{font-family:'General Sans',Inter,sans-serif;font-weight:700;font-size:19px;letter-spacing:-.02em}
.dg-logo-k{width:14px;height:14px;transform:translateY(1px)}

.dg-main{max-width:900px;margin:0 auto;padding:clamp(30px,5vh,52px) clamp(20px,4vw,32px) 72px}

/* ── Qué pasa en la llamada ─────────────────────────────────────────── */
.dg-h1{margin:0;font-family:'General Sans',Inter,sans-serif;font-weight:600;font-size:clamp(28px,4.6vw,46px);line-height:1.06;letter-spacing:-.025em;max-width:30ch;text-wrap:balance}
/* El texto de arriba llega hasta donde llegan las tarjetas de abajo. */
.dg-que{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.dg-que-i{position:relative;padding-left:22px;font-size:clamp(15.5px,1.4vw,17px);line-height:1.55;color:#0B0B0C;text-wrap:pretty}
.dg-que-i::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:#1C4BD8}
.dg-sin{margin:22px 0 0;font-size:15px;line-height:1.65;color:#61697A;text-wrap:pretty}

/* ── Formulario ─────────────────────────────────────────────────────── */
.dg-form{margin-top:clamp(28px,4vh,40px)}
.dg-trampa{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.dg-trabajo{display:flex;flex-direction:column;gap:16px}

.dg-tarjeta{background:#FFFFFF;border:1px solid #E5E5E7;border-radius:18px;padding:clamp(22px,3.5vw,30px);opacity:1;pointer-events:auto;transition:opacity .3s}
.dg-tarjeta-cab{display:flex;align-items:baseline;gap:12px;margin-bottom:18px}
.dg-num{font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.08em;color:#1C4BD8}
.dg-h2{margin:0;font-family:'General Sans',Inter,sans-serif;font-weight:600;font-size:20px;letter-spacing:-.01em}

/* La tarjeta de datos, a todo el ancho desde que se retiró la garantía de al
   lado (agosto 2026). */
.dg-dos{display:grid;gap:16px}

.dg-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.dg-etq{display:block;font-size:13.5px;font-weight:600;margin-bottom:7px}
.dg-req{color:#1C4BD8}
.dg-campo{background:#FFFFFF;border:1px solid #D9DDE4;border-radius:12px;padding:13px 15px;color:#0B0B0C;font-family:Inter,sans-serif;font-size:15.5px;width:100%;transition:border-color .2s,box-shadow .2s}
.dg-select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 49%,#61697A 50%,#61697A 54%,transparent 55%),linear-gradient(-45deg,transparent 49%,#61697A 50%,#61697A 54%,transparent 55%);background-position:calc(100% - 20px) 22px,calc(100% - 13px) 22px;background-size:7px 7px;background-repeat:no-repeat;padding-right:40px;cursor:pointer}

.dg-envio{margin-top:22px;display:flex;flex-direction:column;gap:12px;border-top:1px solid #EEF0F4;padding-top:20px}
.dg-acepto{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5;color:#61697A;cursor:pointer}
.dg-acepto a{color:#61697A;text-decoration:underline;text-underline-offset:3px}
.dg-acepto a:hover{color:#1C4BD8}
.dg-check{flex:0 0 auto;width:17px;height:17px;margin:1px 0 0;accent-color:#1C4BD8;cursor:pointer}
.dg-cita{margin:0;font-size:15px;color:#61697A}
.dg-boton{background:#1C4BD8;color:#FFFFFF;border:none;border-radius:999px;padding:18px;font-family:Inter,sans-serif;font-weight:600;font-size:16.5px;cursor:pointer;transition:filter .2s,transform .25s cubic-bezier(.22,1,.36,1)}
.dg-boton:hover:not(:disabled){filter:brightness(1.12);transform:translateY(-1px)}
.dg-boton:disabled{cursor:not-allowed;background:#E4E7EC;color:#61697A}
.dg-boton-medio{align-self:center;min-width:220px;padding:16px 26px;font-size:16px}
.dg-err{display:none;margin:0;font-size:13.5px;color:#C4373D}
.dg-legal{margin:0;font-size:12.5px;line-height:1.55;color:#61697A}
.dg-legal-f{color:#1D1D1F;font-weight:600}

/* ── Garantía, en pequeño y al lado ─────────────────────────────────── */
.dg-garantia{background:#FFFFFF;border:1px solid #E5E5E7;border-radius:18px;padding:20px 22px;display:flex;flex-direction:column;gap:8px}
.dg-garantia-t{margin:0 0 2px;font-family:'JetBrains Mono',monospace;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:#1C4BD8}
.dg-garantia-p{margin:0;font-size:13.5px;line-height:1.55;color:#61697A}

.dg-directo{margin:6px 0 0;font-size:14.5px;line-height:1.7;color:#61697A}
.dg-directo a{font-weight:600;text-decoration:none;white-space:nowrap}
.dg-directo a:hover{text-decoration:underline;text-underline-offset:3px}
.dg-sep{padding:0 6px;color:#C3C7D0}

/* ── Código por email ───────────────────────────────────────────────── */
.dg-verify{background:#FFFFFF;border:1px solid #E5E5E7;border-radius:18px;padding:clamp(22px,3vw,28px);display:none;flex-direction:column;gap:14px;text-align:center}
.dg-verify-t{margin:0;font-family:'General Sans',Inter,sans-serif;font-weight:700;font-size:21px;letter-spacing:-.02em}
.dg-verify-p{margin:0;max-width:44ch;align-self:center;font-size:14.5px;line-height:1.6;color:#61697A;text-wrap:pretty}
.dg-verify-em{color:#0B0B0C}
.dg-codigo{align-self:center;width:190px;text-align:center;font-family:'JetBrains Mono',monospace;font-size:26px;letter-spacing:.34em;padding:14px 12px;border:1px solid #DDE1E8;border-radius:14px;background:#FBFCFE;color:#0B0B0C}
.dg-volver{align-self:center;background:none;border:none;color:#61697A;font-family:Inter,sans-serif;font-size:13.5px;cursor:pointer;padding:6px}
.dg-volver:hover{color:#0B0B0C}

/* ── Reserva hecha (respaldo: normalmente se va a /confirmacion) ────── */
.dg-hecho{display:none;flex-direction:column;align-items:center;gap:12px;background:#FFFFFF;border:1px solid #E5E5E7;border-radius:18px;padding:36px 26px;text-align:center}
.dg-hecho-i{width:56px;height:56px;border-radius:50%;background:rgba(28,75,216,.1);border:1px solid rgba(28,75,216,.35);color:#1C4BD8;font-size:25px;display:inline-flex;align-items:center;justify-content:center}
.dg-hecho-t{margin:4px 0 0;font-family:'General Sans',Inter,sans-serif;font-weight:700;font-size:26px;letter-spacing:-.02em}
.dg-hecho-c{margin:0;font-size:17px;font-weight:600}
.dg-hecho-cod{margin:0;display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:13px;color:#61697A;background:#F2F4F8;border:1px solid #E5E5E7;border-radius:999px;padding:7px 14px}
.dg-hecho-mono{color:#1C4BD8;letter-spacing:.04em}
.dg-hecho-n{margin:6px 0 0;max-width:46ch;font-size:16px;line-height:1.6;color:#61697A}
.dg-hecho-acc{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px}
.dg-secundario{display:inline-flex;align-items:center;gap:8px;background:#FFFFFF;color:#0B0B0C;text-decoration:none;font-weight:600;font-size:14.5px;padding:12px 20px;border:1px solid #D9DDE4;border-radius:999px}
.dg-secundario:hover{border-color:#1C4BD8;color:#1C4BD8}

/* ── Pie ────────────────────────────────────────────────────────────── */
.dg-pie{margin-top:48px;border-top:1px solid #E5E5E7;padding-top:20px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px;color:#61697A}
.dg-pie-enl{display:flex;gap:18px}
.dg-pie-enl a{color:#61697A;text-decoration:none;padding:6px 0}
.dg-pie-enl a:hover{color:#0B0B0C}

/* ── Móvil ───────────────────────────────────────────────────────────
   La agenda arriba y el formulario debajo, en vertical; los campos a todo el
   ancho y el botón grande. Ningún texto por debajo de 16 px y 20 px de margen
   lateral, como en la portada.
   Los botones de la agenda los pinta diagnostico.js con el tamaño escrito en
   el propio elemento, así que aquí hay que ganarles con !important. */
@media(max-width:899px){
  html,body{max-width:100%;overflow-x:hidden}
  .dg-barra{padding:16px 20px 0}
  .dg-main{padding:26px 20px 64px}
  .dg-h1{font-size:clamp(26px,7.4vw,34px)}
  .dg-que{gap:0;margin-top:22px}
  .dg-que-i{font-size:16.5px;padding:14px 0 14px 22px;border-top:1px solid #E5E7EC}
  .dg-que-i:first-child{border-top:0}
  .dg-que-i::before{top:1.05em}
  .dg-sin{font-size:16px}

  .dg-tarjeta{padding:20px 18px;border-radius:16px}
  .dg-tarjeta-cab{margin-bottom:16px}
  .dg-num{font-size:16px}
  .dg-h2{font-size:19px}

  .dg-campos{grid-template-columns:1fr}
  .dg-etq{font-size:16px;margin-bottom:8px}
  .dg-campo{font-size:16.5px;min-height:54px;padding:15px 16px;border-radius:14px}
  .dg-select{background-position:calc(100% - 20px) 24px,calc(100% - 13px) 24px}

  .dg-envio{margin-top:20px;gap:16px}
  .dg-acepto{font-size:16px;gap:12px;line-height:1.45}
  .dg-check{width:24px;height:24px;margin-top:0}
  .dg-cita{font-size:16px}
  .dg-boton{width:100%;min-height:58px;font-size:17.5px;padding:16px 20px}
  .dg-boton-medio{min-width:0}
  .dg-err,.dg-legal,.dg-directo{font-size:16px}
  .dg-garantia-p,.dg-verify-p{font-size:16px}
  .dg-codigo{width:100%;max-width:250px;font-size:28px}
  .dg-volver{font-size:16px;min-height:44px}
  .dg-secundario{font-size:16px;min-height:52px}
  .dg-hecho-n,.dg-hecho-cod{font-size:16px}
  .dg-pie,.dg-pie-enl a{font-size:16px}
  .dg-pie-enl{gap:20px}

  #dgScheduler>div:nth-of-type(1){font-size:16px !important;margin-bottom:16px !important}
  #dgScheduler>div:nth-of-type(2){gap:8px !important}
  #dgScheduler>div:nth-of-type(2)>button{
    flex:1 1 calc(33.333% - 6px) !important;min-width:0 !important;
    min-height:82px !important;padding:12px 6px !important;font-size:16px !important;
  }
  #dgScheduler>div:nth-of-type(2)>button>span:nth-child(1),
  #dgScheduler>div:nth-of-type(2)>button>span:nth-child(3),
  #dgScheduler>div:nth-of-type(2)>button>span:nth-child(4){font-size:16px !important;letter-spacing:.01em !important}
  #dgScheduler>div:nth-of-type(2)>button>span:nth-child(2){font-size:23px !important}
  #dgScheduler>p{font-size:16px !important;line-height:1.45}
  #dgScheduler>div:nth-of-type(3){grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px !important}
  #dgScheduler>div:nth-of-type(3)>button{font-size:17px !important;min-height:56px !important;padding:15px 8px !important}
}
@media(max-width:359px){
  .dg-barra{padding-left:18px;padding-right:18px}
  .dg-main{padding-left:18px;padding-right:18px}
  .dg-tarjeta{padding-left:16px;padding-right:16px}
  #dgScheduler>div:nth-of-type(2)>button{flex:1 1 calc(50% - 4px) !important}
}