/* =========================================================
   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. NÚMEROS DEL PANEL (clientes, carritos, facturación)
   ========================================================= */

/* Fila de tarjetas con un número grande arriba y qué es abajo */
.em-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--em-e4);
    margin-bottom: var(--em-e5);
}

.em-kpi {
    background: var(--em-blanco);
    border-radius: var(--em-radio-lg);
    box-shadow: var(--em-sombra);
    padding: var(--em-e4) var(--em-e5);
    border-left: 4px solid var(--em-bordo);
}

.em-kpi--alerta { border-left-color: var(--em-error-texto); }
.em-kpi--ok     { border-left-color: var(--em-ok-texto); }

.em-kpi__valor {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--em-texto);
    line-height: 1.2;
}

.em-kpi__label {
    display: block;
    font-size: .78rem;
    color: var(--em-texto-tenue);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: var(--em-e1);
}

.em-kpi__extra {
    display: block;
    font-size: .8rem;
    color: var(--em-texto-medio);
    margin-top: var(--em-e1);
}

/* Filtros tipo pestaña: links, así el filtro queda en la URL */
.em-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--em-e2);
    margin-bottom: var(--em-e4);
}

.em-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--em-e2);
    padding: var(--em-e1) var(--em-e3);
    border-radius: var(--em-radio-pill);
    border: 1px solid var(--em-borde-fuerte);
    background: var(--em-blanco);
    color: var(--em-texto-medio);
    font-size: .82rem;
    text-decoration: none;
}

.em-chip:hover { border-color: var(--em-bordo); color: var(--em-bordo); }

.em-chip--activo,
.em-chip--activo:hover {
    background: var(--em-bordo);
    border-color: var(--em-bordo);
    color: var(--em-blanco);
}

.em-chip__n {
    font-weight: 700;
    opacity: .8;
}

/* Barra de proporción. Es un <progress>: el ancho sale del value/max,
   sin style="" en la plantilla. */
.em-barra {
    width: 100%;
    min-width: 80px;
    height: 8px;
    border: 0;
    border-radius: var(--em-radio-pill);
    background: var(--em-fondo);
    overflow: hidden;
    appearance: none;
}

.em-barra::-webkit-progress-bar   { background: var(--em-fondo); }
.em-barra::-webkit-progress-value { background: var(--em-bordo-claro); border-radius: var(--em-radio-pill); }
.em-barra::-moz-progress-bar      { background: var(--em-bordo-claro); border-radius: var(--em-radio-pill); }

/* Puesto en el ranking */
.em-puesto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--em-fondo);
    font-weight: 700;
    font-size: .8rem;
}

.em-puesto--1 { background: #fde68a; }
.em-puesto--2 { background: #e5e7eb; }
.em-puesto--3 { background: #fed7aa; }

/* Texto largo que no debe romper la tabla (paths, user agents) */
.em-corto {
    display: inline-block;
    max-width: 340px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.em-chico { font-size: .8rem; }

.em-grilla-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--em-e5);
}

.em-grilla-2 > .em-panel + .em-panel { margin-top: 0; }

.em-paginacion {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--em-e3);
    margin-top: var(--em-e4);
}


/* =========================================================
   11b. OFERTAS (tag {% precio %} de templatetags/precios.py)
   ========================================================= */

.em-precio-antes {
    color: var(--em-texto-tenue);
    font-weight: 400;
    font-size: .8em;
    margin-right: var(--em-e1);
}

.em-precio-off {
    display: inline-block;
    background: var(--em-bordo);
    color: var(--em-blanco);
    font-size: .7em;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: var(--em-radio-sm);
    vertical-align: middle;
}

.em-envio-gratis {
    display: inline-block;
    background: var(--em-ok-fondo);
    color: var(--em-ok-texto);
    font-size: .8rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--em-radio-sm);
    margin: var(--em-e1) var(--em-e1) 0 0;
}

/* `.em-check` es flex y le ganaría al atributo `hidden` (filtros del form de ofertas). */
.em-form [hidden] { display: none !important; }

.em-lista-check {
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid var(--em-borde);
    border-radius: var(--em-radio-sm);
    padding: var(--em-e2) var(--em-e3);
}


/* =========================================================
   12. RESPONSIVE
   ========================================================= */

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

    .em-kpis { grid-template-columns: repeat(2, 1fr); gap: var(--em-e3); }
    .em-kpi { padding: var(--em-e3); }
    .em-kpi__valor { font-size: 1.25rem; }
    .em-grilla-2 { grid-template-columns: 1fr; }
    .em-corto { max-width: 180px; }

    .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; }
}