/* ==========================================================================
   WOOSYNCRO — ESTILOS DE LAS FUNCIONES DEL PLUGIN
   --------------------------------------------------------------------------
   Version: 1.0.0

   QUE VA AQUI Y QUE NO
   --------------------
   Aqui va SOLO lo que da forma a lo que este plugin dibuja:

       - la tarjeta de credito del cliente
       - la pestana de estado de cuenta
       - la forma de pago "Credito de Cliente"

   NO va aqui el aspecto general del sitio -colores del tema, tipografia,
   la pagina de "pedido recibido"-. Eso es presentacion del TEMA y su sitio
   es el style.css del tema hijo. Si algun dia se cambia de tema, esas
   reglas deben irse con el; estas otras tienen que quedarse, porque sin
   ellas las funciones del plugin se ven rotas.

   POR QUE UN ARCHIVO Y NO "CSS adicional"
   ---------------------------------------
   El CSS adicional del personalizador vive en la base de datos, va atado al
   tema activo y no se puede revisar ni revertir. Esto es un archivo: se
   versiona, se lee, se compara y viaja con el plugin.

   Se carga SOLO en las paginas donde hace falta (ver el enqueue en
   woosyncro-custom.php), no en toda la tienda.

   COLORES
   -------
   Se declaran una vez y se usan por nombre. Cambiar la marca es tocar tres
   lineas, no buscar el mismo codigo repartido por todo el archivo.
   ========================================================================== */

:root {
    --ws-fondo:        #0d0d0d;
    --ws-fondo-suave:  #141414;
    --ws-borde:        #2b2b2b;
    --ws-borde-fuerte: #4a4a4a;
    --ws-texto:        #f0f0f0;
    --ws-texto-suave:  #9a9a9a;
    --ws-rojo:         #e10600;
    --ws-verde:        #28a745;
}


/* ==========================================================================
   1. TARJETA DE CREDITO DEL CLIENTE
   Sale en el escritorio de "Mi cuenta"
   ========================================================================== */

.woosyncro-credit-dashboard {
    margin: 24px 0;
    padding: 22px;
    background: var(--ws-fondo);
    border: 1px solid var(--ws-borde);
    border-left: 3px solid var(--ws-rojo);
    border-radius: 6px;
}

/* El titulo lleva !important porque el sitio pinta TODOS los encabezados de
   blanco para el fondo oscuro, y aqui hace falta ganarle a esa regla. Es la
   unica forma de que la tarjeta se defienda sola sin depender del tema. */
.woosyncro-credit-dashboard h3 {
    margin: 0 0 18px !important;
    color: var(--ws-texto) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 1.6px !important;
    text-transform: uppercase !important;
}

.woosyncro-credit-dashboard .woosyncro-cifras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 1px;
    background: var(--ws-borde);
    border: 1px solid var(--ws-borde);
    border-radius: 4px;
    overflow: hidden;
}

.woosyncro-credit-dashboard .woosyncro-cifra {
    padding: 16px 14px;
    background: var(--ws-fondo-suave);
    text-align: center;
}

.woosyncro-credit-dashboard .woosyncro-cifra-valor {
    display: block;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 21px;
    font-weight: 700;
    color: var(--ws-texto);
}

.woosyncro-credit-dashboard .woosyncro-cifra--disponible .woosyncro-cifra-valor {
    color: var(--ws-verde);
}

.woosyncro-credit-dashboard .woosyncro-cifra-titulo {
    display: block;
    margin-top: 5px;
    color: var(--ws-texto-suave);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.woosyncro-credit-dashboard .woosyncro-nota {
    margin: 14px 0 0;
    color: var(--ws-texto-suave);
    font-size: 12px;
}


/* ==========================================================================
   2. ESTADO DE CUENTA
   La pestana de "Mi cuenta"
   ========================================================================== */

/* --- Los totales de arriba --- */

.woosyncro-ec-resumen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1px;
    margin-bottom: 24px;
    background: var(--ws-borde);
    border: 1px solid var(--ws-borde);
    border-radius: 4px;
    overflow: hidden;
}

.woosyncro-ec-caja {
    padding: 17px 14px;
    background: var(--ws-fondo);
    text-align: center;
}

.woosyncro-ec-cifra {
    display: block;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 21px;
    font-weight: 700;
    color: var(--ws-texto);
}

.woosyncro-ec-vencido .woosyncro-ec-cifra {
    color: var(--ws-rojo);
}

.woosyncro-ec-texto {
    display: block;
    margin-top: 5px;
    color: var(--ws-texto-suave);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

/* --- Los filtros --- */

.woosyncro-ec-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 18px;
    padding: 16px;
    background: var(--ws-fondo);
    border: 1px solid var(--ws-borde);
    border-radius: 4px;
}

.woosyncro-ec-filtros label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    color: var(--ws-texto-suave) !important;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

.woosyncro-ec-filtros select,
.woosyncro-ec-filtros input {
    min-height: 38px;
    padding: 6px 10px;
    background: #ffffff;
    color: #202020;
    border: 1px solid var(--ws-borde);
    border-radius: 3px;
    font-size: 14px;
    letter-spacing: 0;
    text-transform: none;
}

.woosyncro-ec-limpiar {
    align-self: center;
    color: var(--ws-texto-suave);
    font-size: 12px;
    text-decoration: underline;
}

.woosyncro-ec-cuantos {
    margin-bottom: 10px;
    color: var(--ws-texto-suave);
    font-size: 12px;
}

/* --- La tabla de movimientos --- */

.woosyncro-ec-tabla {
    width: 100%;
    border: 1px solid var(--ws-borde);
    border-radius: 4px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    font-size: 14px;
}

.woosyncro-ec-tabla th {
    padding: 12px 14px;
    background: var(--ws-fondo-suave);
    border-bottom: 1px solid var(--ws-borde);
    color: var(--ws-texto-suave);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-align: left;
}

.woosyncro-ec-tabla td {
    padding: 14px;
    background: var(--ws-fondo);
    border-bottom: 1px solid #1c1c1c;
    color: var(--ws-texto);
}

.woosyncro-ec-tabla tr:last-child td {
    border-bottom: 0;
}

/* Documento y saldo en monoespaciada: asi las cifras cuadran una debajo de
   otra y se comparan de un vistazo, como en una factura */
.woosyncro-ec-tabla td[data-label="Documento"],
.woosyncro-ec-tabla td[data-label="Saldo"] {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

.woosyncro-ec-tabla td[data-label="Saldo"] {
    text-align: right;
    white-space: nowrap;
}

.woosyncro-ec-fila-vencida td {
    background: rgba(225, 6, 0, .07);
}

.woosyncro-ec-alerta {
    color: var(--ws-rojo);
    font-weight: 600;
}

.woosyncro-ec-pagado {
    color: var(--ws-texto-suave);
}

.woosyncro-ec-vacio {
    padding: 22px;
    border: 1px dashed var(--ws-borde);
    border-radius: 4px;
    color: var(--ws-texto-suave);
    text-align: center;
}

/* --- Paginas --- */

.woosyncro-ec-paginas {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 18px;
}

.woosyncro-ec-paginas a,
.woosyncro-ec-paginas span {
    padding: 7px 12px;
    background: var(--ws-fondo);
    border: 1px solid var(--ws-borde);
    border-radius: 3px;
    color: var(--ws-texto);
    font-size: 13px;
    text-decoration: none;
}

.woosyncro-ec-paginas a:hover {
    border-color: var(--ws-borde-fuerte);
}

.woosyncro-ec-pagina-actual {
    border-color: var(--ws-rojo) !important;
    font-weight: 700;
}

.woosyncro-ec-pie {
    margin-top: 14px;
    color: var(--ws-texto-suave);
    font-size: 12px;
}


/* ==========================================================================
   3. LA FORMA DE PAGO "CREDITO DE CLIENTE"
   En el checkout de bloques
   ========================================================================== */

.wc-block-components-radio-control-accordion-option:has(input[value="woosyncro_credit"]:checked) {
    border-color: var(--ws-rojo) !important;
}

.woosyncro-pago-credito {
    padding: 4px 0;
}

.woosyncro-pago-credito .woosyncro-pago-saldo {
    margin: 6px 0 0;
    font-weight: 600;
    color: var(--ws-texto);
}


/* ==========================================================================
   4. EN CELULAR
   La tabla se apila: cada dato con su etiqueta delante
   ========================================================================== */

@media (max-width: 600px) {

    .woosyncro-ec-tabla thead {
        display: none;
    }

    .woosyncro-ec-tabla tr {
        display: block;
        margin-bottom: 12px;
        border: 1px solid var(--ws-borde);
        border-radius: 4px;
        overflow: hidden;
    }

    .woosyncro-ec-tabla td {
        display: flex;
        justify-content: space-between;
        gap: 14px;
        border-bottom: 1px solid #1c1c1c;
        padding: 10px 14px;
    }

    .woosyncro-ec-tabla td::before {
        content: attr(data-label);
        color: var(--ws-texto-suave);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .woosyncro-ec-filtros label {
        flex: 1 1 100%;
    }
}


/* =========================================================================
   PRECIO DE CONVENIO   (28 de agosto de 2026)
   -------------------------------------------------------------------------
   El cliente con convenio ve su precio pactado en toda la tienda. Tiene que
   saber POR QUE ese precio es distinto del que ve todo el mundo.

   Se usa el MISMO lenguaje visual que la aplicacion de pedidos: morado
   (#7B1FA2 sobre #F3E5F5) y un icono de etiqueta. Quien usa las dos cosas
   reconoce el precio de convenio sin tener que aprender nada nuevo.
   ========================================================================= */

.woosyncro-convenio-marca {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 2px 8px;
    border: 1px solid #7B1FA2;
    border-radius: 10px;
    background: #F3E5F5;
    color: #7B1FA2;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .02em;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
}

.woosyncro-convenio-icono {
    font-size: 12px;
    line-height: 1;
}

/* En el listado los precios van apretados: la etiqueta baja a su propia
   linea para no romper la rejilla de productos. */
.woocommerce ul.products li.product .woosyncro-convenio-marca {
    display: flex;
    width: -moz-fit-content;
    width: fit-content;
    margin: 6px auto 0;
}

/* El detalle del reparto por cantidad, debajo del producto en el carrito */
.woocommerce-cart .woosyncro-convenio-marca {
    margin-left: 0;
}

/* En oscuro el morado claro de fondo ciega. Se invierte manteniendo el
   mismo color de identidad. */
@media (prefers-color-scheme: dark) {
    .woosyncro-convenio-marca {
        background: rgba(123, 31, 162, .18);
        border-color: #CE93D8;
        color: #E1BEE7;
    }
}


/* =========================================================================
   PAGAR LA CARTERA DESDE EL ESTADO DE CUENTA   (28 de agosto de 2026)
   ========================================================================= */

.woosyncro-ec-col-pagar {
    width: 48px;
    text-align: center;
}

.woosyncro-ec-marcar {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* La casilla del importe. Se ve apagada mientras la factura no este
   marcada, para que quede claro que primero se elige y luego se ajusta. */
.woosyncro-ec-importe {
    width: 120px;
    padding: 6px 8px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--woosyncro-borde, #3a3a3a);
    border-radius: 6px;
    background: var(--woosyncro-fondo-campo, #ffffff);
    color: #202020;
}

.woosyncro-ec-importe:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* La barra de abajo: cuanto va a pagar y el boton. Se queda pegada al pie
   en el movil, que es donde la tabla se hace larga y el boton se pierde. */
.woosyncro-ec-barra-pago {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: 18px;
    padding: 16px 18px;
    border: 1px solid #7B1FA2;
    border-radius: 10px;
    background: rgba(123, 31, 162, .06);
}

.woosyncro-ec-total-pago {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.woosyncro-ec-total-pago span {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .75;
}

.woosyncro-ec-total-pago strong {
    font-size: 24px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.woosyncro-ec-boton-pagar {
    padding: 12px 22px !important;
    font-weight: 700 !important;
}

.woosyncro-ec-boton-pagar:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.woosyncro-ec-nota-pago {
    flex: 1 1 100%;
    margin: 0;
    font-size: 13px;
    opacity: .8;
}

@media (max-width: 600px) {
    .woosyncro-ec-importe {
        width: 100%;
    }
    .woosyncro-ec-barra-pago {
        position: sticky;
        bottom: 0;
        z-index: 5;
        background: var(--woosyncro-fondo, #ffffff);
    }
}