/* ---- Reset & basics ---- */
*, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }
html { font-size: 100%; }
body {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    background: #f5fbff;
    color: #222;
    line-height: 1.5;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1rem;
}

/* ---- Layout ---- */
header { text-align: center; margin-bottom: 2rem; max-width: 480px; }
header h1 { font-size: 2rem; margin-bottom: .5rem; }
header p { color: #555; font-size: .95rem; }
main { width: 100%; max-width: 480px; display: grid; gap: 1.5rem; }
.card {
    background: #fff;
    border-radius: .75rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
    padding: 1.5rem;
}
.card h2 { font-size: 1.1rem; margin-bottom: 1rem; color: #333; }

/* ---- Botón principal de captura (label del file input) ---- */
.big-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    width: 100%;
    padding: 1.5rem 1rem;
    background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%);
    color: #fff;
    border-radius: .75rem;
    font-size: 1.25rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 102, 255, .35);
    transition: transform .15s ease, box-shadow .15s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.big-btn:hover  { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 102, 255, .45); }
.big-btn:active { transform: translateY(1px); box-shadow: 0 2px 8px rgba(0, 102, 255, .35); }
.big-btn--busy  { background: #888; cursor: wait; pointer-events: none; opacity: .75; }
.big-btn__icon  { font-size: 1.75rem; line-height: 1; }
.big-btn__text  { letter-spacing: .3px; }

.hint {
    margin-top: .85rem;
    font-size: .85rem;
    color: #666;
    text-align: center;
}

/* ---- Cámara en vivo (opcional, plegable) ---- */
.live {
    margin-top: 1.25rem;
    border-top: 1px dashed #ddd;
    padding-top: 1rem;
}
.live summary {
    cursor: pointer;
    color: #0066ff;
    font-size: .9rem;
    padding: .35rem 0;
    user-select: none;
}
.live summary::marker { color: #0066ff; }
.live[open] summary { margin-bottom: 1rem; }
.live__body { display: grid; gap: .75rem; }
#video {
    width: 100%;
    height: auto;
    background: #000;
    border-radius: .5rem;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    /* Asegurar que NO se muestren controles tipo "video player" */
    pointer-events: none;
}

/* ---- Botones secundarios ---- */
button {
    background: #0066ff;
    color: #fff;
    border: none;
    border-radius: .5rem;
    padding: .75rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .2s;
    width: 100%;
}
button:hover    { background: #0052cc; }
button:active   { transform: translateY(1px); }
button:disabled { background: #888; cursor: wait; }

/* ---- Result preview ---- */
.preview-img {
    width: 100%;
    max-height: 320px;
    object-fit: cover;
    border-radius: .5rem;
    margin-top: 1rem;
}
#info p { margin: .65rem 0; font-size: .95rem; }
#info span { font-weight: 600; }
#new-photo-btn { margin-top: 1rem; }

/* ---- Footer ---- */
footer {
    margin-top: 2rem;
    font-size: .875rem;
    color: #555;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
}

/* ---- AI status badge ---- */
.ai-status {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .9rem;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 500;
    border: 1px solid transparent;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.ai-status__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #999;
    flex-shrink: 0;
}
.ai-status__link {
    color: inherit;
    text-decoration: underline;
    font-weight: 600;
    margin-left: .25rem;
}
.ai-status__link[hidden] { display: none; }
.ai-status--checking { background: #eef3ff; color: #2a4fad; border-color: #c8d6ff; }
.ai-status--checking .ai-status__dot { background: #5b7bd6; animation: aiPulse 1.4s ease-in-out infinite; }
.ai-status--ok       { background: #e6f7ec; color: #0a7a2f; border-color: #b6e5c5; }
.ai-status--ok       .ai-status__dot { background: #22c55e; animation: aiGlow 2.5s ease-in-out infinite; }
.ai-status--fail     { background: #fff0f0; color: #b40000; border-color: #f5b5b5; cursor: pointer; }
.ai-status--fail     .ai-status__dot { background: #ef4444; animation: aiBlink 1.2s steps(2, start) infinite; }
.ai-status--fail:hover { background: #ffe5e5; }

@keyframes aiPulse { 0%,100% {opacity:1; transform:scale(1);} 50% {opacity:.4; transform:scale(.85);} }
@keyframes aiGlow  { 0%,100% {box-shadow:0 0 0 0 rgba(34,197,94,.6);} 70% {box-shadow:0 0 0 8px rgba(34,197,94,0);} }
@keyframes aiBlink { 50% { opacity: .35; } }