/* ===== TBC 1-1 — Estilos públicos ===== */
/* Tamaños de texto: base 16px del navegador, reducidos ~2pt (≈2.67px) en todo el plugin */

#tbc-wrap {
    font-family: inherit;
    max-width: 900px;
    margin: 0 auto;
    padding: 16px;
    font-size: 13px; /* antes heredaba 16px (~14pt) -> ahora ~12pt */
}

#tbc-wrap h2 {
    font-size: 21px; /* antes 1.5em de 16px = 24px (~18pt) -> ahora ~16pt */
    margin-bottom: 8px;
    color: #251b72;
}

#tbc-wrap h3 {
    font-size: 16px; /* antes ~18px navegador (~13.5pt) -> ahora ~12pt */
}

#tbc-wrap .tbc-info {
    background: #f0f4ff;
    border-left: 4px solid #251b72;
    padding: 10px 16px;
    margin-bottom: 16px;
    border-radius: 4px;
    font-size: 13px;
}

/* ---- Botones ---- */
#tbc-wrap .tbc-btn {
    display: inline-block;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px; /* antes 0.9em de 16px = 14.4px (~11pt) -> ahora ~9pt */
    text-decoration: none;
    transition: background 0.2s;
    margin: 4px 2px;
    color: #fff !important;
}

#tbc-wrap .tbc-btn-primary {
    background: #251b72;
}

#tbc-wrap .tbc-btn-secondary {
    background: #009acc;
}

#tbc-wrap .tbc-btn-active {
    background: #251b72;
}

#tbc-wrap .tbc-btn:hover {
    background: #f63f2d !important;
}

#tbc-wrap .tbc-btn-disabled,
#tbc-wrap .tbc-btn-disabled:hover {
    background: #cccccc !important;
    color: #777 !important;
    cursor: not-allowed;
    pointer-events: none;
}

/* ---- Filtros de estado ---- */
#tbc-wrap .tbc-filtros {
    margin: 12px 0;
}

/* ---- Tablas ---- */

/* Contenedor con scroll horizontal: permite deslizar la tabla con el dedo
   en pantallas estrechas sin alterar el diseño de la tabla en sí */
#tbc-wrap .tbc-tabla-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* scroll suave en iOS */
    margin-top: 12px;
    /* Sombra sutil a los lados para sugerir que se puede deslizar */
    background:
        linear-gradient(to right, #fff 30%, rgba(255,255,255,0)),
        linear-gradient(to right, rgba(0,0,0,0.08), #fff 30%) 0 100%,
        radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.15), rgba(0,0,0,0)),
        radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.15), rgba(0,0,0,0)) 100% 0;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
}

#tbc-wrap .tbc-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

/* Evita que las celdas se compriman tanto que el texto se amontone:
   cada columna mantiene su ancho natural y el conjunto puede desbordar
   el contenedor, que es quien se encarga del scroll */
#tbc-wrap .tbc-tabla th,
#tbc-wrap .tbc-tabla td {
    white-space: nowrap;
}

/* El Concepto y el Título sí pueden llevar texto largo: permitimos que
   ese texto haga salto de línea en vez de alargar la tabla sin límite */
#tbc-wrap .tbc-tabla td.tbc-col-texto {
    white-space: normal;
    min-width: 140px;
}

#tbc-wrap .tbc-tabla th {
    background: #251b72;
    color: #fff;
    padding: 8px 10px;
    text-align: left;
}

#tbc-wrap .tbc-tabla td {
    padding: 8px 10px;
    border-bottom: 1px solid #e0e0e0;
    vertical-align: middle;
}

#tbc-wrap .tbc-tabla tr:hover td {
    background: #f9f9f9;
}

/* ---- Formularios ---- */
#tbc-wrap .tbc-form {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 20px;
    margin: 16px 0;
    max-width: 480px;
    font-size: 13px;
}

#tbc-wrap .tbc-form label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: #333;
}

#tbc-wrap .tbc-form input[type="text"],
#tbc-wrap .tbc-form input[type="number"],
#tbc-wrap .tbc-form select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 12px;
    box-sizing: border-box;
    font-size: 13px;
}

/* Saldo de la cuenta (positivo/negativo respecto al usuario logueado) */
#tbc-wrap .tbc-saldo-positivo { color: #009acc; font-weight: bold; }
#tbc-wrap .tbc-saldo-negativo { color: #f63f2d; font-weight: bold; }

/* Saldo en la cabecera de la pantalla de Apuntes: +2pt respecto al texto base */
#tbc-wrap .tbc-saldo-apuntes {
    font-size: 15px;
}

/* Valor de un apunte (su efecto sobre el saldo del usuario logueado) */
#tbc-wrap .tbc-valor-suma  { color: #009acc; font-weight: bold; }
#tbc-wrap .tbc-valor-resta { color: #f63f2d; font-weight: bold; }

/* Filtro de búsqueda en pantalla Cuentas: -1pt respecto al texto base */
#tbc-wrap .tbc-filtro-busqueda {
    font-size: 12px;
}
#tbc-wrap .tbc-filtro-busqueda input[type="text"],
#tbc-wrap .tbc-filtro-busqueda input[type="number"],
#tbc-wrap .tbc-filtro-busqueda select,
#tbc-wrap .tbc-filtro-busqueda label {
    font-size: 12px;
}

#tbc-wrap .tbc-mensaje {
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 12px;
    font-size: 13px;
}
#tbc-wrap .tbc-mensaje-ok    { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
#tbc-wrap .tbc-mensaje-error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

/* ---- Ajustes para móvil: menos margen lateral para ganar espacio ---- */
@media (max-width: 600px) {
    /* Kadence (y temas similares) limitan el ancho del contenido con su
       propio "Content Inner Container". Para que el plugin aproveche
       todo el ancho de la pantalla en móvil, rompemos ese contenedor
       usando el ancho del viewport y centrando con margin negativo. */
    #tbc-wrap {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding: 6px 10px;
        box-sizing: border-box;
        overflow-x: hidden; /* por si 100vw incluyera el ancho de la scrollbar */
    }
    #tbc-wrap .tbc-tabla th,
    #tbc-wrap .tbc-tabla td {
        padding: 6px 6px;
    }
    #tbc-wrap .tbc-info {
        padding: 8px 10px;
    }
    #tbc-wrap .tbc-form {
        padding: 12px;
        max-width: 100%;
    }
}