/* =========================================================
   Estilo Madera — capa de componentes compartida
   =========================================================

   Reemplaza los ~330 style="" sueltos que había repartidos por las
   plantillas. Mantiene el mismo look de siempre: bordo, tarjetas
   redondeadas y sombras suaves.

   Todas las clases van con prefijo `em-` para no chocar con las que ya
   definen inicio.html (tienda) y panel_admin.html (panel), que usan los
   mismos nombres (.card, .menu) con estilos distintos.

   Convención: em-<bloque>__<parte> y em-<bloque>--<variante>
   ========================================================= */

/* =========================================================
   1. TOKENS
   ========================================================= */

:root {
    /* --- Marca ---
       Un solo bordo para todo el proyecto. Antes había tres:
       #5a0f2c (tienda), #6d2c2c (panel) y #7b1e2b (botón suelto). */
    --em-bordo: #5a0f2c;
    --em-bordo-oscuro: #3a071c;
    --em-bordo-claro: #7d2244;

    /* --- Neutros --- */
    --em-blanco: #ffffff;
    --em-fondo: #f4f2f0;
    --em-fondo-suave: #faf9f8;
    --em-borde: #e7e2dd;
    --em-borde-fuerte: #d6cec6;

    --em-texto: #2a2a2a;
    --em-texto-medio: #5f5a56;
    --em-texto-tenue: #8a837d;

    /* --- Estados --- */
    --em-ok-fondo: #dcfce7;
    --em-ok-texto: #166534;
    --em-error-fondo: #fee2e2;
    --em-error-texto: #991b1b;
    --em-espera-fondo: #fef9c3;
    --em-espera-texto: #854d0e;
    --em-info-fondo: #e0f2fe;
    --em-info-texto: #075985;

    /* --- Espaciado (escala de 4) --- */
    --em-e1: 4px;
    --em-e2: 8px;
    --em-e3: 12px;
    --em-e4: 16px;
    --em-e5: 24px;
    --em-e6: 32px;
    --em-e7: 48px;

    /* --- Radios ---
       Antes convivían 6, 8, 10, 12, 14, 16 y 20px sin criterio. */
    --em-radio-sm: 8px;
    --em-radio: 12px;
    --em-radio-lg: 16px;
    --em-radio-pill: 999px;

    /* --- Sombras --- */
    --em-sombra-sm: 0 2px 6px rgba(0, 0, 0, .05);
    --em-sombra: 0 6px 18px rgba(0, 0, 0, .06);
    --em-sombra-lg: 0 14px 34px rgba(0, 0, 0, .10);

    /* --- Otros --- */
    --em-transicion: .2s ease;
}


/* =========================================================
   2. TIPOGRAFÍA
   ========================================================= */

.em-titulo-pagina {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--em-bordo-oscuro);
    margin-bottom: var(--em-e5);
}

.em-titulo-seccion {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--em-bordo-oscuro);
    margin-bottom: var(--em-e3);
}

.em-tenue {
    color: var(--em-texto-tenue);
    font-size: .9rem;
}

.em-fuerte { font-weight: 600; }

/* Números y plata: tabulares, para que las columnas queden alineadas */
.em-monto {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}


/* =========================================================
   3. PANEL (la tarjeta blanca contenedora)
   ========================================================= */

.em-panel {
    background: var(--em-blanco);
    border-radius: var(--em-radio-lg);
    box-shadow: var(--em-sombra);
    padding: var(--em-e5);
}

/* Para tablas anchas: scroll horizontal propio, así la página nunca
   scrollea de costado en celular. */
.em-panel--scroll {
    overflow-x: auto;
    padding: var(--em-e4);
}

.em-panel + .em-panel { margin-top: var(--em-e5); }

.em-panel__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--em-e3);
    flex-wrap: wrap;
    margin-bottom: var(--em-e4);
}


/* =========================================================
   4. TABLAS
   ========================================================= */

.em-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: .93rem;
}

.em-tabla th,
.em-tabla td {
    padding: var(--em-e3);
    text-align: left;
    vertical-align: middle;
}

.em-tabla thead th {
    background: var(--em-fondo-suave);
    color: var(--em-texto-medio);
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    border-bottom: 1px solid var(--em-borde);
}

.em-tabla thead th:first-child { border-top-left-radius: var(--em-radio-sm); }
.em-tabla thead th:last-child  { border-top-right-radius: var(--em-radio-sm); }

.em-tabla tbody tr { border-bottom: 1px solid var(--em-borde); }
.em-tabla tbody tr:last-child { border-bottom: none; }
.em-tabla tbody tr:hover { background: var(--em-fondo-suave); }

/* Ancho mínimo para que las tablas de muchas columnas no se aplasten */
.em-tabla--ancha { min-width: 900px; }

.em-der    { text-align: right !important; }
.em-centro { text-align: center !important; }

/* Fila de "no hay nada" */
.em-vacio {
    text-align: center;
    padding: var(--em-e6) var(--em-e3);
    color: var(--em-texto-tenue);
}


/* =========================================================
   5. BADGES DE ESTADO
   ========================================================= */

.em-badge {
    display: inline-block;
    padding: var(--em-e1) var(--em-e3);
    border-radius: var(--em-radio-pill);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}

.em-badge--ok     { background: var(--em-ok-fondo);     color: var(--em-ok-texto); }
.em-badge--error  { background: var(--em-error-fondo);  color: var(--em-error-texto); }
.em-badge--espera { background: var(--em-espera-fondo); color: var(--em-espera-texto); }
.em-badge--info   { background: var(--em-info-fondo);   color: var(--em-info-texto); }
.em-badge--neutro { background: var(--em-fondo);        color: var(--em-texto-medio); }


/* =========================================================
   6. BOTONES
   ========================================================= */

.em-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--em-e2);

    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: var(--em-radio);

    font-family: inherit;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;
    transition: background var(--em-transicion),
                border-color var(--em-transicion),
                transform var(--em-transicion);
}

.em-btn:active { transform: translateY(1px); }

.em-btn:focus-visible {
    outline: 2px solid var(--em-bordo-claro);
    outline-offset: 2px;
}

.em-btn[disabled],
.em-btn--inactivo {
    opacity: .55;
    cursor: not-allowed;
    pointer-events: none;
}

/* Variantes */
.em-btn--primario        { background: var(--em-bordo); color: #fff; }
.em-btn--primario:hover  { background: var(--em-bordo-oscuro); }

.em-btn--oscuro          { background: #2c2c2c; color: #fff; }
.em-btn--oscuro:hover    { background: #141414; }

.em-btn--exito           { background: #15803d; color: #fff; }
.em-btn--exito:hover     { background: #106031; }

.em-btn--peligro         { background: #b91c1c; color: #fff; }
.em-btn--peligro:hover   { background: #8f1414; }

.em-btn--suave {
    background: var(--em-blanco);
    color: var(--em-texto);
    border-color: var(--em-borde-fuerte);
}
.em-btn--suave:hover { background: var(--em-fondo-suave); }

/* Tamaños y ancho */
.em-btn--sm     { padding: 6px 12px; font-size: .8rem; border-radius: var(--em-radio-sm); }
.em-btn--bloque { width: 100%; }

/* Grupo de botones */
.em-btn-grupo {
    display: flex;
    gap: var(--em-e2);
    flex-wrap: wrap;
}


/* =========================================================
   7. FORMULARIOS
   ========================================================= */

.em-form { display: grid; gap: var(--em-e4); }

.em-campo { display: grid; gap: var(--em-e1); }

.em-label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--em-texto-medio);
}

.em-input,
.em-select,
.em-textarea {
    width: 100%;
    padding: var(--em-e3);

    border: 1px solid var(--em-borde-fuerte);
    border-radius: var(--em-radio-sm);

    background: var(--em-blanco);
    color: var(--em-texto);

    font-family: inherit;
    font-size: .95rem;

    transition: border-color var(--em-transicion), box-shadow var(--em-transicion);
}

.em-input:focus,
.em-select:focus,
.em-textarea:focus {
    outline: none;
    border-color: var(--em-bordo);
    box-shadow: 0 0 0 3px rgba(90, 15, 44, .10);
}

.em-textarea { min-height: 110px; resize: vertical; }

.em-ayuda {
    font-size: .78rem;
    color: var(--em-texto-tenue);
}

/* Checkbox / radio con su etiqueta al lado */
.em-check {
    display: flex;
    align-items: center;
    gap: var(--em-e2);
    font-size: .9rem;
    cursor: pointer;
}

.em-check input { width: 16px; height: 16px; accent-color: var(--em-bordo); cursor: pointer; }

/* Dos columnas que colapsan en celular */
.em-form-2col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--em-e4);
}


/* =========================================================
   8. LISTAS DE DATOS (clave / valor)
   ========================================================= */

.em-datos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--em-e4);
}

.em-dato { display: grid; gap: 2px; }

.em-dato__label {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--em-texto-tenue);
}

.em-dato__valor { font-size: .98rem; }


/* =========================================================
   9. AVISOS
   ========================================================= */

.em-aviso {
    padding: var(--em-e3) var(--em-e4);
    border-radius: var(--em-radio);
    border-left: 4px solid;
    font-size: .92rem;
    margin-bottom: var(--em-e4);
}

.em-aviso--ok     { background: var(--em-ok-fondo);     color: var(--em-ok-texto);     border-color: var(--em-ok-texto); }
.em-aviso--error  { background: var(--em-error-fondo);  color: var(--em-error-texto);  border-color: var(--em-error-texto); }
.em-aviso--espera { background: var(--em-espera-fondo); color: var(--em-espera-texto); border-color: var(--em-espera-texto); }
.em-aviso--info   { background: var(--em-info-fondo);   color: var(--em-info-texto);   border-color: var(--em-info-texto); }


/* =========================================================
   9-bis. HOJA CENTRADA
   Para las páginas de resultado (pago aprobado, rechazado,
   pendiente, datos de transferencia).
   ========================================================= */

.em-hoja {
    max-width: 700px;
    margin: var(--em-e7) auto;
    background: var(--em-blanco);
    padding: var(--em-e6);
    border-radius: var(--em-radio-lg);
    box-shadow: var(--em-sombra-lg);
}

.em-hoja--centro { text-align: center; }

.em-hoja__titulo {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: var(--em-e4);
}

.em-hoja__titulo--ok     { color: #15803d; }
.em-hoja__titulo--error  { color: #b91c1c; }
.em-hoja__titulo--espera { color: #a16207; }

.em-hoja p { line-height: 1.65; }
.em-hoja p + p { margin-top: var(--em-e3); }

/* Caja de datos resaltada (CBU, alias, etc.) */
.em-caja {
    background: var(--em-fondo-suave);
    border: 1px solid var(--em-borde);
    padding: var(--em-e4);
    border-radius: var(--em-radio);
    margin: var(--em-e4) 0;
    text-align: left;
}

.em-caja p + p { margin-top: var(--em-e2); }

/* Texto que se copia (CBU, alias): monoespaciado y seleccionable */
.em-copiable {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: var(--em-blanco);
    border: 1px solid var(--em-borde);
    border-radius: var(--em-radio-sm);
    padding: 2px var(--em-e2);
    user-select: all;
}


/* =========================================================
   10. UTILIDADES DE ESPACIADO
   ========================================================= */

.em-mt-1 { margin-top: var(--em-e1); }
.em-mt-2 { margin-top: var(--em-e2); }
.em-mt-3 { margin-top: var(--em-e3); }
.em-mt-4 { margin-top: var(--em-e4); }
.em-mt-5 { margin-top: var(--em-e5); }
.em-mt-6 { margin-top: var(--em-e6); }

.em-mb-2 { margin-bottom: var(--em-e2); }
.em-mb-3 { margin-bottom: var(--em-e3); }
.em-mb-4 { margin-bottom: var(--em-e4); }
.em-mb-5 { margin-bottom: var(--em-e5); }

.em-fila {
    display: flex;
    align-items: center;
    gap: var(--em-e3);
    flex-wrap: wrap;
}

.em-fila--fin { justify-content: flex-end; }
.em-fila--entre { justify-content: space-between; }


/* =========================================================
   11. RESPONSIVE
   ========================================================= */

@media (max-width: 720px) {
    .em-titulo-pagina { font-size: 1.35rem; }

    .em-panel { padding: var(--em-e4); }

    /* En celular los botones sueltos ocupan el ancho: más fáciles de tocar */
    .em-btn-grupo .em-btn { flex: 1; }
}