/* Hoja3 — lo que añade a BCA. Prefijo h3_ en clases e identificadores propios. */

:root {
  /* Verde de la marca (el del icono) en lugar del naranja de BCA; el dorado, para resaltar. */
  --bca-acento: #2E7D5B; --bca-acento-fuerte: #1F5C45; --bca-acento-texto: #FFF;
  --bca-apm-fondo: #1F3B30; --bca-dia-cabecera-fondo: #1F3B30;
  --bca-intor-activo: #2E7D5B; --bca-intor-bola-activo: #12352A;
}

body { background: #F6F7F5; }
main { max-width: 1100px; margin: 0 auto; padding: 8px 4px 32px; }
h2 { margin: .4em 0; }
h3 { margin: 1.2em 0 .4em; font-size: 110%; }

.h3_logo { width: 22px; height: 22px; vertical-align: -5px; }
.h3_ayuda { color: #6B6A64; font-size: 90%; }
.h3_centro { text-align: center; }
.h3_cabecera { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5em; }
.h3_herramientas { display: flex; flex-wrap: wrap; gap: .3em; }
.h3_peligro, .h3_peligro:hover { background-color: #B22; border-color: #B22; color: #FFF; }
.h3_version { color: #999; font-size: 85%; cursor: default; }
/* Los botones secundarios de los diálogos (Cancelar, Cerrar, Copiar…), claros: que no se confundan con el principal. */
.bca_dia_pie .bca_btn:not(.bca_primario, .h3_peligro) { background-color: #FFF; color: #1F3B30; border: solid 1px #9DB3A8; }
.bca_dia_pie .bca_btn:not(.bca_primario, .h3_peligro):hover { background-color: #EAF2EE; }
.h3_solo_movil { display: none; }
/* Cada cosa solo para quien puede: el servidor lo comprueba igual, esto solo evita botones que darían error. */
body:not(.h3_admin) .h3_solo_admin { display: none !important; }
body:not(.h3_propietario) .h3_solo_propietario { display: none !important; }
body:not(.h3_editor) .h3_solo_editor { display: none !important; }

/* ---- Menú: libro activo ---- */
.h3_menu_libro { border: solid 1px rgba(255, 255, 255, .5); border-radius: 3px; margin-right: .6em; white-space: nowrap; }
.h3_menu_libro .h3_papel { opacity: .7; font-size: 85%; }

/* ---- Acceso y enlace para la clave: tarjeta centrada ---- */
body.h3_sin_sesion, body.h3_sin_sesion main { padding: 0; }
body.h3_sin_sesion .bca_apmenu { display: none; }
#v_acceso:not(.bca_oculto), #v_clave:not(.bca_oculto) { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; }
.h3_tarjeta { width: 100%; max-width: 360px; background: #FFF; border-radius: 16px; padding: 28px; box-sizing: border-box;
              box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .08); text-align: center; }
.h3_tarjeta_logo { width: 56px; height: 56px; display: block; margin: 0 auto 10px; }
.h3_tarjeta h1 { margin: 0; font-size: 150%; }
.h3_sub { margin: 4px 0 20px; color: #6B6A64; }
.h3_tarjeta .h3_form { text-align: left; }
.h3_tarjeta .bca_btn.h3_entrar { width: 100%; margin: 8px 0; padding: 0 8px; height: 36px; line-height: 36px; font-weight: bold; }
/* Solo para el gestor de contraseñas: el usuario de la cuenta, junto a la clave. */
.h3_usuario_fijo { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---- Formularios ---- */
.bca_in:is(input:not([type=checkbox], [type=radio], [type=file]), select):not(.bca_t_xs, .bca_t_s) { font-size: 14px; line-height: 18px; padding: 4px 5px; }
.h3_form .h3_campo { margin: 0 0 .6em; }
.h3_form label.bca_in { display: block; margin: 0 2px; background: transparent; }
.h3_form input.bca_in:not([type=checkbox]), .h3_form select.bca_in { width: calc(100% - 16px); }
.h3_fila_campos { display: flex; gap: 1em; flex-wrap: wrap; align-items: flex-end; }
.h3_fila_campos > .h3_campo { flex: 1 1 14em; }
.h3_campo_estrecho { flex: 0 0 auto !important; }
.h3_fila_campos select.bca_in { width: auto; }
.h3_boton_campo { padding-bottom: 2px; }
.h3_casilla { display: block; margin: 4px 2px; cursor: pointer; }
.h3_casilla input { vertical-align: -2px; margin-right: 4px; }

/* ---- Segundo paso ---- */
.h3_codigo { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 120%; letter-spacing: .15em; max-width: 14em; }
.h3_qr { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 8px 0 12px; }
.h3_qr svg { width: 180px; height: 180px; flex: none; border: solid 1px #EEE; }
.h3_clave_totp { font-family: ui-monospace, Menlo, Consolas, monospace; word-break: break-all; background: #F6F6F4; padding: 2px 6px; }
.h3_codigos_rec { columns: 2; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 110%; margin: 8px 0; padding-left: 2em; }

/* ---- Libro ---- */
.h3_miembro { display: flex; align-items: center; gap: .6em; padding: 6px 0; border-bottom: solid 1px #E6E6E2; flex-wrap: wrap; }
.h3_miembro_nombre { flex: 1 1 14em; }
.h3_miembro select.bca_in { width: auto; }
#f_miembro { margin-top: 1em; }
.h3_zona_peligro { margin-top: 2em; padding-top: 1em; border-top: solid 1px #E6E6E2; display: flex; gap: .5em; flex-wrap: wrap; }
.h3_proximamente { margin-top: 1em; }

/* ---- Usuarios ---- */
.h3_enlace_largo code { word-break: break-all; background: #F6F6F4; padding: 4px 6px; display: block; }
.h3_etiq_bloqueado { background: #B22; }
.h3_etiq_sin_clave { background: #A86B00; }
.h3_etiq_admin { background: #1F5C45; }

/* ---- Importes ---- */
.h3_importe { font-variant-numeric: tabular-nums; white-space: nowrap; }
.h3_positivo { color: #1E7A46; }
.h3_negativo { color: inherit; }
.h3_col_importe { text-align: right; }
.h3_importe_campo { text-align: right; font-variant-numeric: tabular-nums; }
.h3_suave, .h3_icono_suave { color: #6B6A64; }
.h3_sin_categoria { color: #A86B00; font-style: italic; }
.h3_etiqueta { font-size: 75%; vertical-align: 1px; }
.h3_izq { margin-right: auto !important; }
.bca_dia_pie .h3_izq + .h3_izq { margin-right: 0 !important; }
.h3_color { width: 3em !important; height: 2em; padding: 0 !important; cursor: pointer; }
.h3_moneda { text-transform: uppercase; width: 4em !important; }
.h3_en_linea { display: inline-block; margin-right: .8em; }

/* ---- Movimientos ---- */
.h3_filtros { display: flex; flex-wrap: wrap; gap: 0 .8em; align-items: flex-end; background: #FFF; border: solid 1px #E2E5E1;
              border-radius: 8px; padding: 8px 10px 2px; margin: .4em 0 .6em; }
.h3_filtros .h3_campo { flex: 1 1 9em; }
.h3_filtros .h3_campo_estrecho { flex: 0 0 auto; display: flex; align-items: center; gap: .6em; }
.h3_resumen_lista { margin: .3em 2px .6em; }
.h3_lista_etiquetas { margin: 2px; }
.h3_etiqueta_campo { display: block; margin: 0 2px; font-weight: bold; font-style: italic; font-size: 95%; font-family: Helvetica, Arial, sans-serif; }
.h3_mes { text-transform: capitalize; margin: 1em 0 .2em; }
.h3_fila_mes { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: 6px 4px; border-bottom: solid 1px #E6E6E2; }
.h3_parte { display: flex; gap: .4em; align-items: center; margin-bottom: .4em; flex-wrap: wrap; }
.h3_parte select.bca_in { flex: 1 1 12em; }
.h3_parte [data-campo=importe] { width: 7em; }
.h3_parte [data-campo=notas] { flex: 1 1 8em; }
.h3_falta { margin-left: 1em; color: #A86B00; }
.h3_falta.h3_cuadra { color: #1E7A46; }

/* ---- Cuentas ---- */
.h3_total_cuentas { margin: .4em 2px .8em; font-size: 110%; }
.h3_cuenta { background: #FFF; border: solid 1px #E2E5E1; border-radius: 8px; padding: 10px 12px; margin-bottom: .6em; }
.h3_cuenta.h3_inactiva { opacity: .6; }
.h3_cuenta_cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; flex-wrap: wrap; }
.h3_cuenta_nombre { font-weight: bold; font-size: 110%; }
.h3_saldo { font-size: 125%; font-weight: bold; }
.h3_cuenta_botones { margin-top: .4em; display: flex; gap: .4em; flex-wrap: wrap; }

/* ---- Categorías ---- */
.h3_dos_columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2em; }
.h3_categoria { display: flex; align-items: center; gap: .5em; padding: 4px 0; border-bottom: solid 1px #EEE; }
.h3_categoria.h3_madre { font-weight: bold; margin-top: .4em; }
.h3_categoria.h3_hija { padding-left: 1.6em; }
.h3_categoria_nombre { flex: 1; }
.h3_punto { display: inline-block; width: .8em; height: .8em; border-radius: 50%; flex: none; }
.h3_usos { color: #6B6A64; font-size: 85%; font-weight: normal; text-decoration: none; }
.h3_etiqueta_fila { display: inline-block; margin: 0 .6em .4em 0; }
.h3_etiqueta_fila .bca_etiq { font-size: 95%; }

/* ---- Importar ---- */
.h3_subida { background: #FFF; border: solid 1px #E2E5E1; border-radius: 8px; padding: 6px 12px; }
.h3_grupo { background: #FFF; border: solid 1px #E2E5E1; border-radius: 8px; padding: 10px 12px; margin: .6em 0; }
.h3_grupo_cabeza { display: flex; flex-wrap: wrap; gap: .4em 1em; align-items: center; }
.h3_grupo_cabeza select.bca_in { max-width: 100%; }
.h3_chips { margin: .4em 0; display: flex; flex-wrap: wrap; gap: .3em; }
.h3_saldo_check { margin: .4em 0; }
.h3_tabla_previa { width: 100%; border-collapse: collapse; margin: .4em 0; }
.h3_tabla_previa td { padding: 5px 4px; border-bottom: solid 1px #EEE; vertical-align: top; }
.h3_fila_duplicada, .h3_fila_anterior, .h3_fila_sin_cuenta { color: #8A8A84; }
.h3_fila_posible { background: #FFF8E6; }
.h3_nowrap { white-space: nowrap; }
.h3_est_nueva { background: #1E7A46; }
.h3_est_duplicada { background: #8A8A84; }
.h3_est_posible { background: #A86B00; }
.h3_est_anterior { background: #B0B0A8; }
.h3_botones_previa { display: flex; justify-content: flex-end; gap: .5em; margin: .6em 0 1.4em; }
.h3_importacion { background: #FFF; border: solid 1px #E2E5E1; border-radius: 8px; padding: 8px 12px; margin-bottom: .5em; }
.h3_importacion.h3_inactiva { opacity: .6; }
details summary { cursor: pointer; color: #6B6A64; margin: .3em 0; }

/* ---- Móvil (lo que BCA pasa a fichas y menú plegado: menos de 600px) ---- */
.h3_libro_movil { color: #FFF; text-decoration: none; margin-left: .6em; font-size: 95%; white-space: nowrap; overflow: hidden;
                  text-overflow: ellipsis; max-width: calc(100vw - 140px); display: inline-block; vertical-align: middle; }
/* ---- Resumen y presupuesto ---- */
.h3_mes { display: flex; align-items: center; gap: .3em; }
.h3_mes input[type=month] { width: 11em; }
.h3_cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(10em, 1fr)); gap: .6em; margin: .4em 0 .8em; }
.h3_cifra { background: #FFF; border: solid 1px #E2E5E1; border-radius: 8px; padding: 8px 12px; }
.h3_cifra_titulo { color: #6B6A64; font-size: 90%; }
.h3_cifra_valor { font-size: 140%; font-weight: bold; white-space: nowrap; }
.h3_aviso { margin-bottom: .6em; }
.h3_graf { background: #FFF; border: solid 1px #E2E5E1; border-radius: 8px; padding: 6px; min-height: 3em; }
.h3_linea_cat { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2px .5em; padding: 5px 0; border-bottom: solid 1px #EEE; }
.h3_linea_cat .h3_barra { grid-column: 2 / -1; }
.h3_linea_nombre { min-width: 0; overflow-wrap: anywhere; }
.h3_linea_nombre a { color: inherit; }
.h3_linea_importe { text-align: right; white-space: nowrap; }
.h3_linea_presupuesto, .h3_linea_cabeza { grid-template-columns: auto 1fr auto 7em; }
.h3_linea_cabeza { color: #6B6A64; font-size: 85%; border-bottom-color: #CCC; }
.h3_linea_cabeza .h3_linea_nombre { grid-column: 1 / 3; }
.h3_previsto { box-sizing: border-box; width: 100%; text-align: right; padding: 2px 4px; }
.h3_previsto_txt { text-align: right; }
.h3_barra { display: block; height: 6px; background: #E8ECE9; border-radius: 3px; overflow: hidden; }
.h3_barra_relleno { display: block; height: 100%; background: #2E7D32; }
.h3_barra_relleno.h3_cerca { background: #EF6C00; }
.h3_barra_relleno.h3_pasado { background: #C62828; }

/* ---- Préstamos e inversiones ---- */
.h3_barra_prestamo { margin: .4em 0 .2em; }
.h3_cuadro_caja { margin-top: .6em; }
.h3_tabla_caja { overflow-x: auto; max-width: 100%; }
.h3_tabla { width: 100%; border-collapse: collapse; margin: .4em 0; font-size: 95%; }
.h3_tabla th { text-align: left; color: #6B6A64; font-weight: normal; font-size: 90%; border-bottom: solid 1px #CCC; padding: 3px 4px; }
.h3_tabla td { padding: 4px; border-bottom: solid 1px #EEE; }
.h3_tabla .h3_num, .h3_tabla th.h3_num { text-align: right; white-space: nowrap; }
.h3_tabla_cuadro { max-height: 30em; }
.h3_tabla_cuadro tr.h3_pasada td { color: #6B6A64; }
.h3_estado_cuota { white-space: nowrap; }
.h3_aviso_txt { color: #B45309; font-size: 90%; }
.h3_cuenta .h3_cifras { margin: .5em 0; }
.h3_cuenta .h3_cifra { background: #F7F8F6; }
.h3_detalles { margin-top: .5em; }
.h3_detalles summary { cursor: pointer; color: #1F3B30; }
.h3_selector_corto { width: auto; }

/* ---- Reglas ---- */
.h3_regla { display: flex; align-items: flex-start; gap: .6em; background: #FFF; border: solid 1px #E2E5E1; border-radius: 8px; padding: 8px 10px; margin-bottom: .5em; }
.h3_regla.h3_inactiva { opacity: .6; }
.h3_regla_orden { flex: none; width: 1.8em; height: 1.8em; line-height: 1.8em; text-align: center; border-radius: 50%; background: #EAF2EE; color: #1F3B30; font-weight: bold; font-size: 90%; }
.h3_regla_texto { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.h3_regla_botones { flex: none; display: flex; gap: .2em; }
.h3_subtitulo { margin: .3em 0 .2em; color: #1F3B30; }
.h3_prueba { margin-top: .8em; border-top: solid 1px #E2E5E1; padding-top: .4em; max-height: 16em; overflow-y: auto; }
.h3_prueba_fila { display: grid; grid-template-columns: 6.5em 1fr auto; gap: .5em; padding: 3px 0; border-bottom: solid 1px #F0F0F0; font-size: 92%; }
.h3_prueba_concepto { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 599px) {
  /* Resumen y presupuesto: el mes debajo del título, las cifras de dos en dos. */
  .h3_mes { flex-basis: 100%; }
  .h3_mes input[type=month] { flex: 1; width: auto; }
  .h3_cifras { grid-template-columns: 1fr 1fr; }
  .h3_cifra_valor { font-size: 120%; }
  .h3_linea_presupuesto, .h3_linea_cabeza { grid-template-columns: auto 1fr auto 6em; }
  .h3_regla { flex-wrap: wrap; }
  .h3_tabla_cuadro th:nth-child(4), .h3_tabla_cuadro td:nth-child(4) { display: none; }  /* Intereses: la cuota y lo amortizado bastan */
  .h3_cuenta .h3_cifras { grid-template-columns: 1fr 1fr; }
  .h3_regla_botones { margin-left: auto; }
  .h3_prueba_fila { grid-template-columns: 1fr auto; }
  .h3_prueba_fila > span:first-child { grid-column: 1 / -1; color: #6B6A64; font-size: 90%; }
  main { padding: 4px 12px 32px; }
  h2 { font-size: 130%; }
  .h3_solo_movil { display: inline; }
  .h3_dos_columnas { grid-template-columns: 1fr; }
  .h3_tabla_previa td:last-child { display: none; }  /* El estado ya lo dice el color de la fila y los chips */
  .h3_botones_previa .bca_btn { flex: 1; }
  .h3_filtros .h3_campo { flex: 1 1 40%; }
  .h3_filtros:not(.h3_abierto) { display: none; }
  .h3_boton_filtros { margin: .2em 0 .4em; }
  /* Los cambios en bloque, solo cuando hay algo elegido (desactivados ocupan media pantalla). */
  .bca_rej_accion:disabled { display: none; }
  .h3_parte [data-campo=notas] { flex-basis: 100%; }
  /* Los libros del menú: el papel debajo del nombre, sin salirse del panel. */
  .h3_menu_libro { white-space: normal; }
  #h3_libros_lista { box-sizing: border-box; max-width: 100%; }
  #h3_libros_lista .bca_apm_subelem { white-space: normal; }
  #h3_libros_lista .h3_papel { display: block; margin-left: 1.6em; }
  /* Miembros: nombre arriba, papel y botón debajo. */
  .h3_miembro_nombre { flex-basis: 100%; }
  #f_miembro .h3_campo_estrecho { flex: 1 1 100% !important; }
  #f_miembro select.bca_in { width: calc(100% - 16px); }
  /* Pie de las rejillas: arriba el recuento y «Por página»; debajo, los botones de página en una sola fila. El
     ::before (una línea vacía de ancho completo) fuerza el salto entre las dos filas. */
  .bca_rej_pie { justify-content: center; gap: .5em .4em; }
  .bca_rej_pie .bca_rej_nav { display: contents; }
  .bca_rej_pie::before { content: ''; order: 2; flex-basis: 100%; height: 0; }
  .bca_rej_rango { order: 1; margin-right: auto; }
  .bca_rej_por { order: 1; margin: 0; }
  .bca_rej_por select.bca_in { width: auto; }
  .bca_rej_ir, .bca_rej_pagina { order: 3; }
  body.bca_tactil .bca_rej_ir { min-height: 40px; min-width: 44px; padding: 6px 10px; margin: 0; }
  .bca_rej_pagina { min-width: 3.5em; }
  /* Con una sola página (los cuatro botones desactivados), la fila de botones sobra. */
  .bca_rej_pie:has([data-ir=anterior]:disabled):has([data-ir=siguiente]:disabled) :is(.bca_rej_ir, .bca_rej_pagina) { display: none; }
}