/* Almido Visual CSS v2 ── completo */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap');

:root {
    --almido-primary:   #1a6b8a;
    --almido-secondary: #27ae9e;
    --almido-alert:     #e74c3c;
    --almido-font:      'Nunito', sans-serif;
    --almido-bg:        #0a1628;
    --almido-surface:   rgba(255,255,255,0.07);
    --almido-surface2:  rgba(255,255,255,0.13);
    --almido-border:    rgba(255,255,255,0.13);
    --almido-text:      #e8f4f8;
    --almido-text2:     rgba(232,244,248,0.6);
    --almido-radius:    16px;
    --almido-shadow:    0 8px 32px rgba(0,0,0,0.45);
    --almido-ease:      0.25s cubic-bezier(0.4,0,0.2,1);
}

#almido-app *, #almido-app *::before, #almido-app *::after {
    box-sizing: border-box; margin: 0; padding: 0;
}
#almido-app {
    font-family: var(--almido-font);
    background:  var(--almido-bg);
    color:       var(--almido-text);
    min-height:  100dvh;
    overflow-x:  hidden;
}

/* ── Pantallas ── */
.almido-screen {
    display:        none;
    flex-direction: column;
    align-items:    center;
    min-height:     100dvh;
    padding:        0 1rem 2rem;
    overflow-y:     auto;
    animation:      aFadeIn .3s ease;
}
.almido-screen--active { display: flex; }
@keyframes aFadeIn { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:translateY(0) } }

/* ── Loader ── */
#almido-screen-loading { justify-content: center; }
.almido-loader { display:flex; flex-direction:column; align-items:center; gap:1.5rem; }
.almido-loader__eye {
    width:72px; height:72px;
    border:3px solid var(--almido-border);
    border-top-color:var(--almido-secondary);
    border-radius:50%;
    animation:aSpin .85s linear infinite;
}
@keyframes aSpin { to { transform:rotate(360deg) } }
.almido-loader__text { color:var(--almido-text2); font-size:.9rem; }

/* ══ CONSENTIMIENTO ══════════════════════════════════════════════════════ */
#almido-screen-consent { padding-top:0; gap:0; justify-content:flex-start; }

.almido-consent-logo-wrap {
    width:100%; display:flex; justify-content:center;
    padding:2.2rem 0 1.4rem;
    border-bottom:1px solid var(--almido-border);
    margin-bottom:1.5rem;
    background:linear-gradient(180deg,rgba(26,107,138,.18) 0%,transparent 100%);
}
.almido-logo { max-height:52px; max-width:160px; width:auto; object-fit:contain; }
.almido-logo--sm { max-height:34px; max-width:100px; }

.almido-consent-hero { text-align:center; margin-bottom:1.4rem; padding:0 .5rem; }
.almido-consent-title {
    font-size:1.8rem; font-weight:800; line-height:1.15; margin-bottom:.45rem;
    background:linear-gradient(135deg,#fff 30%,var(--almido-secondary));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.almido-consent-title span {
    background:linear-gradient(135deg,var(--almido-secondary),var(--almido-primary));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.almido-consent-subtitle { font-size:.88rem; color:var(--almido-text2); }

.almido-disclaimer-box {
    width:100%; display:flex; gap:.7rem; align-items:flex-start;
    background:rgba(255,200,0,.07); border:1px solid rgba(255,200,0,.22);
    border-radius:var(--almido-radius); padding:1rem 1.1rem; margin-bottom:1.1rem;
    font-size:.82rem; line-height:1.65; color:rgba(255,235,160,.88);
}
.almido-disclaimer-icon { font-size:1.3rem; flex-shrink:0; margin-top:1px; }

.almido-privacy-list { list-style:none; width:100%; display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.3rem; }
.almido-privacy-list li {
    display:flex; align-items:center; gap:.65rem;
    font-size:.86rem; background:var(--almido-surface);
    border:1px solid var(--almido-border); border-radius:10px; padding:.55rem .9rem;
}
.almido-privacy-list li span { font-size:1rem; flex-shrink:0; }

.almido-consent-check {
    display:flex; align-items:flex-start; gap:.7rem; cursor:pointer;
    font-size:.84rem; line-height:1.5; color:var(--almido-text2);
    margin-bottom:1.1rem; padding:.8rem 1rem;
    background:var(--almido-surface); border:1px solid var(--almido-border);
    border-radius:var(--almido-radius); width:100%; transition:border-color var(--almido-ease);
}
.almido-consent-check:has(input:checked) {
    border-color:var(--almido-secondary); background:rgba(39,174,158,.08); color:var(--almido-text);
}
.almido-consent-check input[type=checkbox] {
    width:20px; height:20px; margin-top:1px; accent-color:var(--almido-secondary); flex-shrink:0;
}

/* ══ CALIBRACIÓN ═════════════════════════════════════════════════════════ */
#almido-screen-calibration { padding-top:1.4rem; gap:.9rem; }

.almido-calib-instruction {
    display:flex; align-items:flex-start; gap:.8rem;
    background:var(--almido-surface); border:1px solid var(--almido-border);
    border-radius:var(--almido-radius); padding:.9rem 1.1rem; width:100%;
}
.almido-calib-instruction__icon { font-size:2rem; flex-shrink:0; }
.almido-calib-instruction strong { display:block; font-size:.95rem; margin-bottom:.2rem; }
.almido-calib-instruction p { font-size:.82rem; color:var(--almido-text2); line-height:1.5; }

.almido-calib-status {
    display:flex; align-items:center; gap:.6rem;
    font-size:.86rem; color:var(--almido-text2); min-height:24px;
}
.almido-calib-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.almido-calib-dot--waiting  { background:rgba(255,255,255,.25); }
.almido-calib-dot--detected { background:var(--almido-secondary); animation:aPulseDot 1.2s ease infinite; }
.almido-calib-dot--ready    { background:#27ae60; }
@keyframes aPulseDot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(.8)} }

.almido-calib-dip-preview {
    display:flex; align-items:center; gap:.5rem; font-size:.8rem; color:var(--almido-text2);
    background:var(--almido-surface); border:1px solid var(--almido-border);
    padding:.45rem 1rem; border-radius:999px;
}
.almido-calib-dip-preview strong { color:var(--almido-secondary); font-size:1.05rem; }

/* ══ INSTRUCCIÓN OJO ════════════════════════════════════════════════════ */
.almido-eye-instruction {
    width:100%; text-align:center; font-size:.88rem; color:var(--almido-text2);
    background:var(--almido-surface); border:1px solid var(--almido-border);
    border-radius:var(--almido-radius); padding:.7rem 1rem; margin-bottom:.5rem;
}

/* ══ BOTONES ════════════════════════════════════════════════════════════ */
.almido-btn {
    width:100%; padding:.95rem 1.5rem; border:none; border-radius:var(--almido-radius);
    font-family:var(--almido-font); font-size:1rem; font-weight:700;
    cursor:pointer; transition:var(--almido-ease); letter-spacing:.02em;
}
.almido-btn:disabled { opacity:.38; cursor:not-allowed; }
.almido-btn--primary {
    background:linear-gradient(135deg,var(--almido-primary),var(--almido-secondary));
    color:#fff; box-shadow:0 4px 18px rgba(39,174,158,.3);
}
.almido-btn--primary:not(:disabled):hover { transform:translateY(-2px); box-shadow:0 8px 26px rgba(39,174,158,.45); }
.almido-btn--secondary { background:var(--almido-surface2); border:1px solid var(--almido-border); color:var(--almido-text); }
.almido-btn--secondary:hover { background:rgba(255,255,255,.15); }
.almido-btn--whatsapp { background:#25d366; color:#fff; box-shadow:0 4px 16px rgba(37,211,102,.3); }
.almido-btn--whatsapp:hover { background:#20bd5a; transform:translateY(-2px); }

/* ══ CÁMARA ════════════════════════════════════════════════════════════ */
.almido-step-title {
    font-size:1.2rem; font-weight:700; text-align:left; width:100%;
    padding:1.2rem 0 .4rem;
}
.almido-camera-wrap {
    position:relative; width:100%; max-width:420px; aspect-ratio:4/3;
    border-radius:var(--almido-radius); overflow:hidden;
    background:#000; box-shadow:var(--almido-shadow);
}
.almido-video { width:100%; height:100%; object-fit:cover; }
.almido-canvas-overlay { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

.almido-calib-controls { display:flex; gap:.7rem; width:100%; }
.almido-calib-controls .almido-btn { padding:.75rem; font-size:.88rem; }
.almido-calib-hint { font-size:.76rem; color:var(--almido-text2); text-align:center; }

/* ══ ESTABILIDAD ══════════════════════════════════════════════════════ */
.almido-stability-ring {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:110px; height:110px; border:3px solid rgba(255,255,255,.15); border-radius:50%;
    transition:border-color .3s; pointer-events:none;
}
.almido-stability-ring--active {
    border-color:var(--almido-secondary);
    animation:aPulseRing 1s ease infinite;
}
@keyframes aPulseRing { 0%,100%{box-shadow:0 0 0 0 rgba(39,174,158,.4)} 50%{box-shadow:0 0 0 14px rgba(39,174,158,0)} }

.almido-capture-status { font-size:.86rem; color:var(--almido-text2); margin-top:.6rem; text-align:center; min-height:20px; }
.almido-progress-bar { width:100%; max-width:420px; height:6px; background:var(--almido-surface); border-radius:3px; margin-top:.4rem; overflow:hidden; }
.almido-progress-fill { height:100%; background:linear-gradient(90deg,var(--almido-primary),var(--almido-secondary)); border-radius:3px; transition:width .1s linear; }

/* ══ PROCESANDO ═══════════════════════════════════════════════════════ */
#almido-screen-processing { justify-content:center; }
.almido-processing { display:flex; flex-direction:column; align-items:center; gap:1.75rem; }
.almido-processing__rings { position:relative; width:88px; height:88px; }
.almido-ring { position:absolute; border-radius:50%; border:2.5px solid transparent; animation:aSpin var(--d) linear infinite; }
.almido-ring--1 { inset:0;    border-top-color:var(--almido-secondary); --d:1.2s; }
.almido-ring--2 { inset:13px; border-top-color:var(--almido-primary);   --d:1.8s; animation-direction:reverse; }
.almido-ring--3 { inset:26px; border-top-color:rgba(255,255,255,.22);   --d:2.4s; }
.almido-processing__text { font-size:1rem; color:var(--almido-text2); }
.almido-processing__steps { list-style:none; font-size:.82rem; color:var(--almido-text2); display:flex; flex-direction:column; gap:.35rem; }
.almido-processing__step  { animation:aFadeIn .3s ease; }

/* ══ RESULTADOS ═══════════════════════════════════════════════════════ */
.almido-results-card {
    width:100%; max-width:480px; background:var(--almido-surface);
    border:1px solid var(--almido-border); border-radius:calc(var(--almido-radius)*1.5);
    padding:1.4rem; box-shadow:var(--almido-shadow); margin-top:1.4rem;
}
.almido-results-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.almido-semaforo { display:flex; align-items:center; gap:.5rem; padding:.5rem .9rem; border-radius:999px; font-size:.8rem; font-weight:700; }
.almido-semaforo--verde    { background:rgba(39,174,96,.18);  border:1px solid rgba(39,174,96,.35);  color:#6dffa7; }
.almido-semaforo--amarillo { background:rgba(243,156,18,.18); border:1px solid rgba(243,156,18,.35); color:#ffd97d; }
.almido-semaforo--rojo     { background:rgba(231,76,60,.18);  border:1px solid rgba(231,76,60,.35);  color:#ff9b8d; }
.almido-semaforo__dot { width:10px; height:10px; border-radius:50%; animation:aPulseDot 1.5s ease infinite; }
.almido-semaforo--verde    .almido-semaforo__dot { background:#27ae60; }
.almido-semaforo--amarillo .almido-semaforo__dot { background:#f39c12; }
.almido-semaforo--rojo     .almido-semaforo__dot { background:#e74c3c; }

.almido-results-metrics { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-bottom:.9rem; }
.almido-metric-item { background:rgba(255,255,255,.04); border:1px solid var(--almido-border); border-radius:10px; padding:.55rem .75rem; display:flex; flex-direction:column; gap:.15rem; }
.almido-metric-label { font-size:.68rem; color:var(--almido-text2); }
.almido-metric-value { font-size:.95rem; font-weight:700; }

.almido-results-dip { text-align:center; padding:.9rem; background:rgba(255,255,255,.04); border-radius:var(--almido-radius); margin-bottom:.9rem; }
.almido-results-dip h3 { font-size:.8rem; color:var(--almido-text2); margin-bottom:.2rem; }
.almido-dip-value      { font-size:2rem; font-weight:800; color:var(--almido-secondary); }
.almido-dip-margin     { font-size:.7rem; color:var(--almido-text2); }

.almido-results-recommendation { font-size:.85rem; line-height:1.65; color:var(--almido-text2); border-left:3px solid var(--almido-secondary); padding-left:.8rem; margin-bottom:.9rem; }
.almido-qr-container { display:flex; flex-direction:column; align-items:center; gap:.35rem; margin-bottom:.75rem; }
.almido-qr-container canvas { border-radius:8px; }
.almido-qr-container p { font-size:.72rem; color:var(--almido-text2); }
.almido-results-disclaimer { font-size:.68rem; color:rgba(232,244,248,.4); border-top:1px solid var(--almido-border); padding-top:.7rem; line-height:1.5; }
.almido-results-timestamp  { font-size:.65rem; color:rgba(232,244,248,.28); margin-top:.2rem; }

.almido-results-actions { display:flex; flex-direction:column; gap:.7rem; width:100%; max-width:480px; margin-top:1rem; padding-bottom:1rem; }

/* ══ MISC ═════════════════════════════════════════════════════════════ */
.almido-eye-badge { background:var(--almido-secondary); color:#fff; padding:.12rem .55rem; border-radius:999px; font-size:.75rem; font-weight:700; margin-left:.4rem; vertical-align:middle; }
.almido-eye-badge--left { background:var(--almido-primary); }
.almido-offline-badge { position:fixed; bottom:1rem; left:50%; transform:translateX(-50%); background:rgba(243,156,18,.12); border:1px solid rgba(243,156,18,.38); color:#ffd97d; padding:.45rem 1.1rem; border-radius:999px; font-size:.78rem; font-weight:600; z-index:200; }
.almido-music-toggle { position:fixed; top:1rem; right:1rem; z-index:100; }
.almido-music-toggle button { background:var(--almido-surface2); border:1px solid var(--almido-border); border-radius:50%; width:40px; height:40px; font-size:1.1rem; cursor:pointer; color:var(--almido-text); }

@media (max-width:380px) {
    .almido-consent-title { font-size:1.5rem; }
    .almido-results-metrics { grid-template-columns:1fr; }
    .almido-calib-controls { flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) {
    *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}