/* ═══════════════════════════════════════════════════
   Estampitas de Santos — Estilos principales
   Diseño devocional: dorado, tipografía clásica, borde
   ═══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Cinzel:wght@400;600&display=swap');

/* ── Variables ──────────────────────────────────── */
:root {
    --es-oro:        #8B6914;
    --es-oro-claro:  #C9A84C;
    --es-oro-fondo:  #F5E6C0;
    --es-crema:      #FFFEF5;
    --es-marron:     #5C3D0A;
    --es-marron-osc: #3D2806;
    --es-texto:      #4A3010;
    --es-borde:      2px solid var(--es-oro);
    --es-radio:      4px;

    /* Medidas de la tarjeta — proporción estampita real */
    --es-card-w:     220px;
    --es-card-h:     340px;
    --es-img-h:      160px;
}

/* ── Contenedor general ─────────────────────────── */
.es-wrapper {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             1.25rem;
    margin:          2rem auto;
    font-family:     'EB Garamond', Georgia, serif;
}

/* ── Tarjeta ─────────────────────────────────────── */
.es-card {
    width:           var(--es-card-w);
    min-height:      var(--es-card-h);
    background:      var(--es-crema);
    border:          var(--es-borde);
    border-radius:   var(--es-radio);
    /* doble marco interior — efecto clásico de estampita */
    box-shadow:
        inset 0 0 0 5px var(--es-oro-fondo),
        inset 0 0 0 7px var(--es-oro);
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    padding:         20px 14px 14px;
    position:        relative;
    /* sutil textura de papel */
    background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 28px,
        rgba(139,105,20,.03) 28px,
        rgba(139,105,20,.03) 29px
    );
}

/* ── Ornamentos (top / bottom) ───────────────────── */
.es-card__ornamento {
    font-family:  'Cinzel', serif;
    font-size:    9px;
    color:        var(--es-oro);
    letter-spacing: 5px;
    line-height:  1;
}
.es-card__ornamento--top  { margin-bottom: 6px; }
.es-card__ornamento--bottom { margin-top: 8px; }

.es-card__cruz {
    font-size: 14px;
    display: block;
    text-align: center;
    color: var(--es-oro);
}

/* ── Imagen ─────────────────────────────────────── */
.es-card__imagen-wrap {
    width:           136px;
    height:          var(--es-img-h);
    border:          1px solid var(--es-oro-claro);
    overflow:        hidden;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      linear-gradient(160deg, #f5edd8 0%, #ede0c0 100%);
    flex-shrink:     0;
}
.es-card__imagen {
    width:      100%;
    height:     100%;
    object-fit: cover;
    object-position: top center;
    display:    block;
}
.es-card__imagen-placeholder svg {
    width: 70px;
    height: 88px;
    opacity: .45;
}

/* ── Nombre ─────────────────────────────────────── */
.es-card__nombre {
    font-family:    'Cinzel', serif;
    font-size:      11.5px;
    font-weight:    600;
    color:          var(--es-marron);
    text-align:     center;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-top:     10px;
    line-height:    1.3;
}

/* ── Fecha de fiesta ─────────────────────────────── */
.es-card__fecha {
    font-family: 'EB Garamond', serif;
    font-size:   9.5px;
    color:       var(--es-oro);
    text-align:  center;
    margin-top:  3px;
    letter-spacing: .5px;
}

/* ── Oración ─────────────────────────────────────── */
.es-card__oracion {
    font-family:  'EB Garamond', serif;
    font-style:   italic;
    font-size:    9px;
    color:        var(--es-texto);
    text-align:   center;
    line-height:  1.55;
    margin-top:   8px;
    padding:      7px 4px 0;
    border-top:   0.5px solid var(--es-oro-claro);
    max-height:   80px;
    overflow:     hidden;
}

/* ── Patronato ───────────────────────────────────── */
.es-card__patronato {
    font-family: 'EB Garamond', serif;
    font-size:   8px;
    color:       var(--es-oro);
    text-align:  center;
    margin-top:  5px;
    font-style:  italic;
}

/* ── Botones ─────────────────────────────────────── */
.es-actions {
    display:     flex;
    gap:         10px;
    flex-wrap:   wrap;
    justify-content: center;
}

.es-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             7px;
    padding:         10px 22px;
    border-radius:   var(--es-radio);
    font-family:     inherit;
    font-size:       14px;
    cursor:          pointer;
    transition:      background .15s, color .15s, border-color .15s;
    text-decoration: none;
    border:          1.5px solid transparent;
    line-height:     1;
}
.es-btn__icon {
    width:  16px;
    height: 16px;
    flex-shrink: 0;
}

.es-btn--print {
    background:   var(--es-marron);
    color:        var(--es-oro-fondo);
    border-color: var(--es-marron);
}
.es-btn--print:hover {
    background:   var(--es-marron-osc);
    border-color: var(--es-marron-osc);
}

.es-btn--secondary {
    background:   transparent;
    color:        var(--es-marron);
    border-color: var(--es-oro-claro);
}
.es-btn--secondary:hover {
    background:   var(--es-oro-fondo);
}

/* ── Hint de instrucciones ───────────────────────── */
.es-hint {
    font-size:   12px;
    color:       #888;
    text-align:  center;
    font-family: inherit;
    margin:      0;
}

/* ════════════════════════════════════════════════════
   MODO OSCURO — respeto al sistema del usuario
   ════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
    .es-card {
        background-color: #2a1f0a;
        background-image: repeating-linear-gradient(
            0deg, transparent, transparent 28px,
            rgba(201,168,76,.04) 28px, rgba(201,168,76,.04) 29px
        );
    }
    .es-card__nombre { color: var(--es-oro-fondo); }
    .es-card__oracion { color: #d4b896; }
    .es-card__imagen-wrap { background: linear-gradient(160deg, #3a2a12 0%, #2e2010 100%); }
    .es-btn--secondary { color: var(--es-oro-fondo); }
    .es-hint { color: #666; }
}