/* ═══════════════════════════════════════════════
   EMERGENCIA WIZARD — Frontend CSS
   Tema: Blanco corporativo, esquinas rectas,
   azul #0d68b3 como color de acento.
═══════════════════════════════════════════════ */

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

:root {
    --ew-blue:         #0d68b3;
    --ew-blue-dark:    #0a5494;
    --ew-blue-light:   #e8f1fb;
    --ew-blue-mid:     #d0e4f7;
    --ew-green:        #1a7f4b;
    --ew-green-bg:     #edf7f2;
    --ew-red:          #c0392b;
    --ew-red-bg:       #fdf0ee;
    --ew-warn:         #b45309;
    --ew-warn-bg:      #fef9ec;
    --ew-warn-border:  #f59e0b;
    --ew-bg:           #f4f6f9;
    --ew-card:         #ffffff;
    --ew-border:       #d1d9e6;
    --ew-border-dark:  #b0bcd4;
    --ew-text:         #1a2035;
    --ew-muted:        #5a6478;
    --ew-font-head:    'Inter Tight', sans-serif;
    --ew-font-body:    'Inter', sans-serif;
    --ew-shadow:       0 2px 12px rgba(13,104,179,0.08), 0 1px 3px rgba(0,0,0,0.06);
}

#ew-wizard {
    font-family: var(--ew-font-body);
    background: var(--ew-bg);
    border: 1px solid var(--ew-border);
    padding: 0 0 28px;
    max-width: 800px;
    margin: 0 auto;
    box-shadow: var(--ew-shadow);
}

#ew-progress-bar { height: 4px; background: var(--ew-blue-mid); }
#ew-progress-fill { height: 100%; background: var(--ew-blue); width: 0%; transition: width 0.45s ease; }

#ew-header-strip {
    background: var(--ew-blue);
    padding: 14px 28px;
    display: flex;
    align-items: center;
    gap: 10px;
}
#ew-header-strip span {
    color: #fff;
    font-family: var(--ew-font-head);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

#ew-breadcrumb {
    font-size: 11px;
    font-weight: 500;
    color: var(--ew-muted);
    padding: 10px 28px;
    border-bottom: 1px solid var(--ew-border);
    min-height: 0;
}
#ew-breadcrumb:empty { display: none; }
#ew-breadcrumb span { color: var(--ew-blue); font-weight: 600; }
#ew-breadcrumb .ew-bc-sep { margin: 0 5px; color: var(--ew-border-dark); }

#ew-card-wrap { padding: 0 24px; }
.ew-card {
    background: var(--ew-card);
    border: 1px solid var(--ew-border);
    border-top: 3px solid var(--ew-blue);
    padding: 28px 28px 24px;
    margin-top: 20px;
    animation: ewSlideIn 0.3s ease both;
    box-shadow: 0 1px 6px rgba(13,104,179,0.05);
}
@keyframes ewSlideIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ew-step-image-wrap {
    margin: 0 0 20px;
    border: 1px solid var(--ew-border);
    max-height: 320px;
    overflow: hidden;
}
.ew-step-image-wrap img { width: 100%; object-fit: cover; display: block; }

#ew-step-badge {
    font-family: var(--ew-font-head);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ew-blue);
    background: var(--ew-blue-light);
    border-left: 3px solid var(--ew-blue);
    padding: 4px 10px;
    margin-bottom: 12px;
    display: inline-block;
}

#ew-step-title {
    font-family: var(--ew-font-head);
    font-size: clamp(19px, 3.5vw, 27px);
    font-weight: 800;
    color: var(--ew-text);
    margin: 0 0 12px;
    line-height: 1.2;
}

#ew-step-body {
    font-size: 15px;
    line-height: 1.7;
    color: var(--ew-muted);
    margin: 0 0 18px;
}

.ew-note {
    background: var(--ew-warn-bg);
    border-left: 3px solid var(--ew-warn-border);
    padding: 11px 16px;
    font-size: 13px;
    color: var(--ew-warn);
    line-height: 1.55;
    margin-bottom: 22px;
}

#ew-choices { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.ew-choice-btn {
    font-family: var(--ew-font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--ew-text);
    background: #fff;
    border: 1.5px solid var(--ew-border);
    border-left: 3px solid transparent;
    padding: 13px 18px;
    text-align: left;
    cursor: pointer;
    transition: all 0.14s;
    line-height: 1.4;
    width: 100%;
}
.ew-choice-btn:hover {
    background: var(--ew-blue-light);
    border-color: var(--ew-blue);
    border-left-color: var(--ew-blue);
    color: var(--ew-blue-dark);
}
.ew-choice-btn:active { background: var(--ew-blue-mid); }

.ew-card.ew-end-ok { border-top-color: var(--ew-green); }
.ew-card.ew-end-ok #ew-step-badge { color: var(--ew-green); background: var(--ew-green-bg); border-left-color: var(--ew-green); }
.ew-card.ew-end-ok #ew-step-title { color: var(--ew-green); }

.ew-card.ew-end-warn { border-top-color: var(--ew-red); }
.ew-card.ew-end-warn #ew-step-badge { color: var(--ew-red); background: var(--ew-red-bg); border-left-color: var(--ew-red); }

#ew-nav {
    display: flex;
    gap: 8px;
    padding: 14px 24px 0;
    border-top: 1px solid var(--ew-border);
    margin-top: 20px;
}
#ew-btn-back, #ew-btn-restart {
    font-family: var(--ew-font-body);
    font-size: 11px;
    font-weight: 700;
    padding: 8px 16px;
    border: 1.5px solid var(--ew-border);
    background: #fff;
    color: var(--ew-muted);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    transition: all 0.13s;
}
#ew-btn-back:hover    { border-color: var(--ew-blue); color: var(--ew-blue); background: var(--ew-blue-light); }
#ew-btn-restart:hover { border-color: var(--ew-red);  color: var(--ew-red);  background: var(--ew-red-bg); }

@media (max-width: 540px) {
    .ew-card { padding: 18px 14px; }
    #ew-card-wrap { padding: 0 10px; }
    #ew-breadcrumb { padding: 8px 14px; }
    #ew-nav { padding: 12px 10px 0; }
    #ew-header-strip { padding: 12px 14px; }
}

/* ── Choice button with image ────────────────── */
.ew-choice-btn--has-img {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
}
.ew-choice-img {
    display: block;
    flex-shrink: 0;
    border: 1px solid var(--ew-border);
    object-fit: cover;
}
.ew-choice-text {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
}