/* ==========================================================================
   Sistema de Facturación INCOFIS — hoja de estilos
   ========================================================================== */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --navy:          #1a2c4d;
    --navy-dark:     #142340;
    --navy-light:    #2a3f6a;
    --navy-soft:     rgba(255, 255, 255, 0.08);

    --orange:        #e87722;
    --orange-hover:  #d36818;
    --orange-soft:   #fef0e3;

    --excel-green:       #1f7244;
    --excel-green-hover: #155b34;

    --green:         #16a34a;
    --green-soft:    #dcfce7;
    --red:           #dc2626;
    --red-soft:      #fee2e2;
    --yellow:        #f5c518;
    --yellow-bg:     #fef9c3;
    --yellow-text:   #854d0e;
    --yellow-border: #fde047;

    --bg:            #d4d8e0;
    --card-bg:       #ffffff;

    --text-dark:     #141f36;
    --text-muted:    #56657a;
    --text-light:    #ffffff;
    --text-on-dark:  rgba(255, 255, 255, 0.92);
    --text-on-dark-soft: rgba(255, 255, 255, 0.6);

    --border:        #d8dde4;
    --border-light:  #eef0f4;
    --border-strong: #b8c0cc;

    --error-bg:      #fee4e2;
    --error-text:    #b42318;
    --error-border:  #fda29b;

    --radius:        10px;
    --radius-sm:     6px;
    --radius-pill:   999px;

    --shadow-sm:     0 1px 3px rgba(26, 44, 77, 0.06);
    --shadow:        0 2px 8px rgba(26, 44, 77, 0.08);
    --shadow-md:     0 6px 20px rgba(26, 44, 77, 0.12);
    --shadow-lg:     0 20px 60px rgba(0, 0, 0, 0.3);

    --font-stack:    "Segoe UI", -apple-system, BlinkMacSystemFont,
                     "Helvetica Neue", "Roboto", Arial, sans-serif;
    --font-mono:     "Cascadia Mono", "Consolas", "SF Mono", "Menlo", monospace;
}

html, body { height: 100%; }

body {
    font-family: var(--font-stack);
    color: var(--text-dark);
    background: var(--bg);
    line-height: 1.5;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }

/* ==========================================================================
   LOGIN
   ========================================================================== */

.pagina-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(rgba(6, 12, 24, 0.35), rgba(6, 12, 24, 0.45)),
        url('../img/login_fondo.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding: 24px;
}

/* Grupo que envuelve lateral + columna central */
.login-grupo {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
}

/* Franja izquierda: texto vertical girado 90°, blanco */
.login-lateral-texto {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    flex-shrink: 0;
    margin-top: 58px;
    align-self: stretch;
}
.login-letra {
    display: none;  /* ya no se usan letras sueltas */
}
.login-texto-vertical {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 8px;
    color: white;
    text-transform: uppercase;
    white-space: nowrap;
    user-select: none;
    opacity: 0.82;
}

/* Columna central: sello + caja */
.login-columna-central {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.caja-login {
    background: white;
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    padding: 32px 36px 24px;
    width: 100%;
    max-width: 400px;
    animation: aparecer 0.4s ease-out;
}

@keyframes aparecer {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cabecera-login { text-align: center; margin-bottom: 22px; }
.logo-login { max-width: 220px; width: 100%; height: auto; margin: 0 auto 12px; display: block; }
.cabecera-login h1 {
    font-size: 13px; font-weight: 600;
    color: var(--text-muted); letter-spacing: 1.5px; text-transform: uppercase;
}

@media (max-width: 540px) {
    .login-grupo { flex-direction: column; align-items: center; }
    .login-lateral-texto { display: none; }
}

.form-login .campo { margin-bottom: 18px; }
.form-login label  {
    display: block; font-size: 13px; font-weight: 600;
    color: var(--text-dark); margin-bottom: 6px;
}
.form-login input {
    width: 100%; padding: 12px 14px;
    border: 1.5px solid var(--border); border-radius: var(--radius-sm);
    font-size: 14px; font-family: inherit;
    color: var(--text-dark); background: #fafbfc;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.form-login input:focus {
    outline: none; border-color: var(--navy); background: white;
    box-shadow: 0 0 0 3px rgba(26, 44, 77, 0.1);
}
.form-login .btn-primario { width: 100%; margin-top: 4px; }

.pie-login {
    text-align: center; margin-top: 26px;
    color: var(--text-muted); font-size: 11px; letter-spacing: 0.3px;
}

/* ==========================================================================
   BOTONES
   ========================================================================== */

.btn-primario, .btn-secundario, .btn-peligro {
    display: inline-block;
    padding: 11px 22px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, transform 0.05s, box-shadow 0.15s;
    text-align: center;
    line-height: 1.2;
}

.btn-primario { background: var(--orange); color: white; }
.btn-primario:hover  { background: var(--orange-hover); }
.btn-primario:active { transform: translateY(1px); }

.btn-secundario {
    background: white; color: var(--text-dark);
    border: 1.5px solid var(--border);
    padding: 9.5px 20px;  /* compensar borde */
}
.btn-secundario:hover { background: var(--bg); border-color: var(--border-strong); }

.btn-peligro { background: var(--red); color: white; }
.btn-peligro:hover { background: #b91c1c; }

.btn-pequeno { padding: 7px 14px; font-size: 11px; }

.btn-mini {
    display: inline-block;
    padding: 5px 11px;
    font-size: 12px;
    border-radius: var(--radius-sm);
    background: var(--border-light);
    color: var(--text-dark);
    border: 1px solid var(--border);
    margin-right: 4px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
button.btn-mini { cursor: pointer; }
.btn-mini:hover {
    background: var(--navy); color: white; border-color: var(--navy);
}
.btn-mini.btn-mini-peligro {
    background: white; color: var(--red); border-color: var(--red-soft);
}
.btn-mini.btn-mini-peligro:hover {
    background: var(--red); color: white; border-color: var(--red);
}

/* Botón Excel (verde corporativo) */
.btn-excel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--excel-green);
    color: white;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    transition: background 0.15s, transform 0.05s;
    font-family: inherit;
}
.btn-excel:hover  { background: var(--excel-green-hover); }
.btn-excel:active { transform: translateY(1px); }
.btn-excel svg    { width: 16px; height: 16px; stroke-width: 2.5; }

/* ==========================================================================
   ALERTAS
   ========================================================================== */

.alerta {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 18px;
    font-size: 13px;
    border: 1px solid transparent;
    line-height: 1.5;
}
.alerta.error {
    background: var(--error-bg); color: var(--error-text); border-color: var(--error-border);
}
.alerta.exito {
    background: var(--green-soft); color: #15803d; border-color: #86efac;
}
.alerta.aviso {
    background: var(--yellow-bg); color: var(--yellow-text); border-color: var(--yellow-border);
}
.alerta.aviso strong { color: var(--yellow-text); }
.oculto { display: none !important; }

/* ==========================================================================
   LAYOUT GENERAL (BARRA LATERAL)
   ========================================================================== */

.pagina-app {
    display: grid;
    grid-template-columns: 220px 1fr;
    min-height: 100vh;
}

.barra-lateral {
    background: var(--navy);
    color: var(--text-on-dark);
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh;
}

.cabecera-logo {
    background: white;
    padding: 10px 12px;
    margin: 10px 12px 10px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.cabecera-logo img { width: 100%; height: auto; display: block; max-height: 64px; object-fit: contain; }

.nombre-app {
    text-align: center;
    font-size: 11px; font-weight: 700; letter-spacing: 2.5px;
    color: var(--text-on-dark-soft);
    margin: 0 12px 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--navy-soft);
}

/* Badge identificador de rol bajo el logo */
.badge-rol {
    margin: -8px 14px 14px;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    padding: 5px 10px;
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    display: inline-block;
    align-self: center;
}
.badge-rol-incofis {
    background: var(--orange);
    color: white;
}
.badge-rol-empresa {
    background: rgba(255, 255, 255, 0.12);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Caja de checkboxes (asignación de empresas a usuario) */
.caja-checks {
    background: #fafbfc;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px;
    max-height: 280px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.check-empresa {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.1s;
    font-size: 13px;
}
.check-empresa:hover { background: white; }
.check-empresa input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: var(--orange);
    flex-shrink: 0;
}
.check-empresa .texto-secundario {
    color: var(--text-muted);
    margin-left: 4px;
}

/* Caja de acceso denegado */
.caja-acceso-denegado {
    background: white;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 60px 30px;
    text-align: center;
    max-width: 520px;
    margin: 40px auto;
}

/* Badge en cabecera de bloque para indicar "lo gestiona INCOFIS" */
.badge-solo-incofis {
    display: inline-block;
    background: rgba(232, 119, 34, 0.1);
    color: var(--orange);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    margin-left: 10px;
    text-transform: uppercase;
    vertical-align: middle;
    border: 1px solid rgba(232, 119, 34, 0.3);
}

/* Aspecto consistente para inputs disabled o readonly */
.form-empresa input[readonly],
.form-empresa input[disabled],
.form-empresa select[disabled],
.form-empresa textarea[readonly] {
    background-color: #f4f5f7;
    color: var(--text-muted);
    cursor: not-allowed;
    border-color: var(--border);
}
.form-empresa input[type="checkbox"][disabled] {
    cursor: not-allowed;
    opacity: 0.6;
}
.form-empresa .checkbox-en-linea:has(input[disabled]) {
    color: var(--text-muted);
    cursor: not-allowed;
}
.caja-acceso-denegado .icono-grande {
    font-size: 56px;
    margin-bottom: 18px;
    opacity: 0.7;
}
.caja-acceso-denegado h2 {
    color: var(--navy);
    margin-bottom: 10px;
}
.caja-acceso-denegado p {
    color: var(--text-muted);
    margin-bottom: 24px;
    font-size: 14px;
    line-height: 1.6;
}

.menu-principal { flex: 1; padding: 0 10px; overflow-y: auto; }
.menu-principal::-webkit-scrollbar { width: 4px; }
.menu-principal::-webkit-scrollbar-thumb { background: var(--navy-soft); border-radius: 4px; }

.separador-menu {
    font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px;
    color: var(--text-on-dark-soft);
    padding: 18px 14px 8px; font-weight: 600;
}

.item-menu {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    color: var(--text-on-dark);
    border-radius: var(--radius-sm);
    margin-bottom: 3px;
    font-size: 14px; font-weight: 500;
    transition: background 0.15s, color 0.15s;
    cursor: pointer;
}
.item-menu .icono { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; flex-shrink: 0; opacity: 0.85; }
.item-menu .icono svg { width: 18px; height: 18px; }
.item-menu .texto { flex: 1; }
.item-menu:hover:not(.deshabilitado) { background: var(--navy-soft); }
.item-menu.activo { background: var(--orange); color: white; box-shadow: 0 2px 6px rgba(232, 119, 34, 0.35); }
.item-menu.activo .icono { opacity: 1; }
.item-menu.deshabilitado { opacity: 0.55; cursor: not-allowed; }
.item-menu .proximamente {
    font-size: 9px; text-transform: uppercase;
    background: rgba(255, 255, 255, 0.12);
    padding: 2px 7px; border-radius: var(--radius-pill);
    font-weight: 700; letter-spacing: 0.6px; color: var(--text-on-dark-soft);
}
.item-menu .badge-menu {
    min-width: 20px; height: 20px;
    padding: 0 6px;
    background: #dc2626;
    color: #fff;
    font-size: 11px; font-weight: 700;
    border-radius: var(--radius-pill);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.item-menu.activo .badge-menu {
    background: #fff; color: var(--orange);
}

.bloque-usuario {
    border-top: 1px solid var(--navy-soft);
    padding: 14px 16px 16px; margin-top: auto;
    display: flex; align-items: center; gap: 8px;
}
.info-usuario { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; }
.avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: white; color: var(--navy);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 15px; flex-shrink: 0;
}
.datos-usuario { min-width: 0; }
.nombre-usuario { font-size: 13px; font-weight: 600; color: white; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rol-usuario { font-size: 11px; color: var(--text-on-dark-soft); }
.enlace-salir {
    display: flex; align-items: center; justify-content: center;
    color: var(--text-on-dark-soft); font-size: 12px;
    padding: 8px; flex-shrink: 0;
    border-radius: var(--radius-sm); border: 1px solid var(--navy-soft);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    font-weight: 500;
}
.enlace-salir svg { width: 16px; height: 16px; }
.enlace-salir:hover { background: var(--navy-soft); color: white; border-color: rgba(255, 255, 255, 0.2); }

.contenido-principal {
    padding: 32px 36px 24px;
    overflow-y: auto;
    display: flex; flex-direction: column;
    min-height: 100vh;
}

.contenedor-panel { max-width: 1400px; flex: 1; width: 100%; }
.contenedor-panel.contenedor-factura { max-width: 1100px; }
.contenedor-panel.contenedor-estrecho { max-width: 760px; }

.titulo-pagina {
    font-size: 24px; font-weight: 700; color: var(--text-dark);
    margin-bottom: 4px; letter-spacing: -0.2px;
}
.subtitulo { color: var(--text-muted); margin-bottom: 28px; font-size: 13px; }
.subtitulo strong { color: var(--text-dark); }

/* ==========================================================================
   PANEL DE CONTROL (tarjetas)
   ========================================================================== */

.tarjetas-resumen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px; margin-bottom: 28px;
}

.tarjeta {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform 0.15s, box-shadow 0.15s;
}
.tarjeta:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.tarjeta-enlace { display: block; cursor: pointer; color: inherit; }

.tarjeta-cabecera {
    background: var(--navy); color: white;
    padding: 13px 20px;
    font-weight: 600; font-size: 14px;
    display: flex; align-items: center; justify-content: space-between;
}
.tarjeta-cuerpo { padding: 20px; }
.tarjeta-cuerpo.placeholder { color: var(--text-muted); font-size: 13px; }

.cifra-grande {
    font-size: 36px; font-weight: 700;
    color: var(--text-dark); margin-bottom: 8px; line-height: 1;
}
.tarjeta-cuerpo.placeholder .cifra-grande { color: var(--border); }

.texto-aviso {
    margin-top: 14px; display: inline-block;
    padding: 3px 10px;
    background: rgba(232, 119, 34, 0.1);
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px;
    color: var(--orange); font-weight: 700;
    border-radius: var(--radius-pill);
}

.texto-accion {
    margin-top: 14px;
    font-size: 12px; font-weight: 600;
    color: var(--orange); letter-spacing: 0.3px;
}

.aviso-version {
    background: white;
    border-left: 4px solid var(--orange);
    border-radius: var(--radius);
    padding: 22px 24px; box-shadow: var(--shadow-sm);
}
.aviso-version strong {
    display: block; color: var(--orange); margin-bottom: 10px;
    font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px;
}
.aviso-version p { font-size: 13px; color: var(--text-muted); margin-bottom: 10px; }
.aviso-version p:last-child { margin-bottom: 0; }
.aviso-version em { color: var(--text-dark); font-style: normal; font-weight: 600; }

.pie-app {
    margin-top: 32px; padding: 16px 0 0;
    border-top: 1px solid var(--border);
    text-align: center; color: var(--text-muted);
    font-size: 11px; letter-spacing: 0.3px;
}

/* ==========================================================================
   MIGAS DE PAN
   ========================================================================== */

.migas-pan {
    font-size: 12px; color: var(--text-muted); margin-bottom: 8px;
    display: flex; align-items: center; gap: 8px;
}
.migas-pan a { color: var(--text-muted); }
.migas-pan a:hover { color: var(--navy); text-decoration: underline; }
.migas-pan .separador { opacity: 0.5; }
.migas-pan span { color: var(--text-dark); font-weight: 500; }

/* ==========================================================================
   FICHA CABECERA (cuando se edita una empresa, estilo BBDD)
   ========================================================================== */

.ficha-cabecera {
    background: white;
    border-radius: var(--radius);
    padding: 18px 24px;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    gap: 22px;
    box-shadow: var(--shadow-sm);
}
.ficha-logo-wrap {
    width: 90px; height: 90px;
    flex-shrink: 0;
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    background: var(--bg);
    padding: 6px;
}
.ficha-logo-wrap img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ficha-logo-vacio { color: var(--text-muted); font-size: 11px; text-align: center; }
.ficha-info { flex: 1; min-width: 0; }
.ficha-nombre {
    font-size: 22px;
    font-weight: 700;
    color: var(--navy);
    letter-spacing: -0.3px;
    line-height: 1.2;
}
.ficha-meta {
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 13px;
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 4px;
}
.ficha-nif { font-family: var(--font-mono); letter-spacing: 0.5px; }
.separador-punto { margin: 0 2px; opacity: 0.4; }

/* ==========================================================================
   CABECERA DE LISTADO + FILTROS
   ========================================================================== */

.cabecera-listado {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 14px;
}
.cabecera-listado .titulo-pagina { margin-bottom: 4px; }
.cabecera-listado .subtitulo { margin-bottom: 0; }
.acciones-cabecera {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
}

.barra-filtros {
    display: flex; gap: 12px;
    background: white;
    padding: 14px 16px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: 16px;
    align-items: center;
    flex-wrap: wrap;
}
.campo-busqueda { flex: 1; min-width: 240px; }
.campo-busqueda input,
.barra-filtros select {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-family: inherit;
    background: #fafbfc;
    color: var(--text-dark);
    transition: border-color 0.15s, background 0.15s;
}
.campo-busqueda input:focus,
.barra-filtros select:focus,
.barra-filtros input:focus {
    outline: none; border-color: var(--navy); background: white;
}
.barra-filtros select { width: auto; padding: 9px 32px 9px 12px; cursor: pointer; }
.barra-filtros select[name="mes"] { min-width: 80px; max-width: 170px; }
.barra-filtros .btn-secundario { padding: 8px 18px; font-size: 12px; }

.enlace-limpiar {
    color: var(--text-muted); font-size: 12px;
    text-decoration: underline; cursor: pointer;
}
.enlace-limpiar:hover { color: var(--navy); }

.contador-resultados {
    font-size: 12px; color: var(--text-muted);
    margin-bottom: 12px; padding-left: 4px;
}
.contador-resultados em { color: var(--navy); font-style: normal; font-weight: 600; }

/* ==========================================================================
   TABLA DE LISTADO
   ========================================================================== */

.tabla-contenedor {
    background: white;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.tabla-listado {
    width: 100%;
    border-collapse: collapse;
}
.tabla-listado thead {
    background: var(--navy);
    color: white;
}
.tabla-listado th {
    text-align: left;
    padding: 12px 14px;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.tabla-listado th.col-logo { width: 56px; }
.tabla-listado th.acciones { width: 110px; text-align: right; }
.tabla-listado th.col-fecha { width: 95px; }
.tabla-listado td.col-fecha { white-space: nowrap; }
.tabla-listado th.col-total { width: 110px; }
.tabla-listado th.col-estado { width: 90px; }
.tabla-listado th.centrado { text-align: center; }

.enlace-orden {
    color: white;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: opacity 0.15s;
}
.enlace-orden:hover { opacity: 0.85; }
.flecha-orden {
    font-size: 11px;
    display: inline-block;
    width: 12px;
    text-align: center;
}
.flecha-orden.inactiva {
    opacity: 0.4;
    font-weight: 400;
}
.flecha-orden.activa {
    color: var(--orange);
    font-weight: 900;
    opacity: 1;
}

.tabla-listado tbody tr {
    border-bottom: 1px solid var(--border-light);
    transition: background 0.1s;
}
.tabla-listado tbody tr:last-child { border-bottom: none; }
.tabla-listado tbody tr:hover { background: #f8f9fb; }
.tabla-listado tbody tr.fila-inactiva {
    opacity: 0.5;
    color: #94a3b8;
    background: #fafbfc;
}
.tabla-listado tbody tr.fila-inactiva strong,
.tabla-listado tbody tr.fila-inactiva .texto-secundario {
    color: #94a3b8 !important;
    font-weight: normal;
}
.tabla-listado tbody tr.fila-inactiva .mini-logo {
    filter: grayscale(100%);
    opacity: 0.6;
}

.tabla-listado td {
    padding: 11px 14px;
    font-size: 13px;
    vertical-align: middle;
}
.tabla-listado td.acciones { text-align: right; white-space: nowrap; }
.tabla-listado td.centrado { text-align: center; }
.tabla-listado td.monoespaciado { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }

.texto-secundario {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.mini-logo {
    width: 36px; height: 36px;
    border-radius: var(--radius-sm);
    object-fit: contain;
    background: white;
    border: 1px solid var(--border-light);
    padding: 2px;
}
.mini-logo.placeholder {
    background: var(--navy); color: white;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px;
    padding: 0;
    border: none;
}
.mini-logo.grande { width: 60px; height: 60px; font-size: 22px; }

.etiqueta {
    display: inline-block;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.etiqueta-activa   { background: var(--green-soft); color: #15803d; }
.etiqueta-inactiva { background: var(--border-light); color: var(--text-muted); }
.etiqueta-tipo     { background: rgba(26, 44, 77, 0.08); color: var(--navy); }

/* Colores por rol de usuario */
.rol-administrador_incofis { background: rgba(198, 40, 40, 0.12);  color: #c62828; }  /* rojo */
.rol-asesor_incofis        { background: rgba(230, 119, 34, 0.14); color: #b35a12; }  /* naranja */
.rol-propietario_empresa   { background: rgba(21, 101, 192, 0.12); color: #1565c0; }  /* azul */
.rol-empleado_empresa      { background: rgba(46, 125, 50, 0.12);  color: #2e7d32; }  /* verde */

/* ==========================================================================
   ESTADO VACÍO
   ========================================================================== */

.estado-vacio {
    background: white;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 60px 30px;
    text-align: center;
}
.estado-vacio .emoji-grande { font-size: 48px; margin-bottom: 14px; opacity: 0.5; }
.estado-vacio h3 { font-size: 17px; color: var(--text-dark); margin-bottom: 6px; }
.estado-vacio p { color: var(--text-muted); margin-bottom: 22px; font-size: 13px; }
.estado-vacio .btn-primario,
.estado-vacio .btn-secundario { display: inline-block; padding: 11px 24px; }

/* ==========================================================================
   FORMULARIO DE EMPRESA — estilo BBDD INCOFIS
   ========================================================================== */

.form-empresa {
    display: flex; flex-direction: column; gap: 24px;
}

/* Logo + Identidad lado a lado */
.fila-logo-identidad {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 2.2fr;
    gap: 20px;
}

/* Domicilio + Contacto lado a lado */
.fila-domicilio-contacto {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Panel con borde naranja y etiqueta-pastilla (estilo BBDD) */
.bloque-form {
    background: white;
    border: 1.5px solid var(--orange);
    border-radius: var(--radius);
    padding: 28px 22px 20px;
    position: relative;
}

.bloque-form h3 {
    position: absolute;
    top: -12px;
    left: 18px;
    background: white;
    padding: 4px 14px;
    font-size: 11px;
    border: 1.5px solid var(--orange);
    border-radius: var(--radius-pill);
    color: var(--navy);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin: 0;
    line-height: 1.2;
    z-index: 1;
}

.rejilla-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 20px;
}

/* Variante con 3 columnas (Cliente: Empresa e identidad en 2 líneas) */
.rejilla-form-3col {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 20px;
}
@media (max-width: 760px) {
    .rejilla-form-3col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 500px) {
    .rejilla-form-3col { grid-template-columns: 1fr; }
}

/* Variante para los paneles que van en grid 1fr 1fr (domicilio+contacto):
   conserva sub-rejilla de 2 columnas pero más compacta */
.rejilla-form-estrecha {
    gap: 12px 16px;
}

.campo { display: flex; flex-direction: column; }
.campo.campo-grande   { grid-column: 1 / -1; }
.rejilla-form-3col .campo.campo-grande { grid-column: auto; }
.campo.campo-pequeno  { max-width: 200px; }

.campo label {
    font-size: 11px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="password"],
.campo input[type="number"],
.campo input[type="date"],
.campo input[type="tel"],
.campo input[type="url"],
.campo select,
.campo textarea {
    width: 100%;
    padding: 10px 13px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-family: inherit;
    background: #fafbfc;
    color: var(--text-dark);
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.campo textarea {
    resize: vertical;
    min-height: 70px;
    line-height: 1.5;
}

.obligatorio {
    color: var(--red);
    font-weight: 700;
    margin-left: 2px;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    outline: none;
    border-color: var(--navy);
    background: white;
    box-shadow: 0 0 0 3px rgba(26, 44, 77, 0.1);
}

.campo.con-error input,
.campo.con-error select {
    border-color: var(--error-border);
    background: #fff5f5;
}

.mensaje-error {
    color: var(--error-text);
    font-size: 12px;
    margin-top: 5px;
}

.checkbox-en-linea {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    padding: 8px 0;
    cursor: pointer;
    color: var(--text-dark);
    font-weight: 500;
}
.checkbox-en-linea input[type="checkbox"] {
    width: 16px; height: 16px; cursor: pointer;
    accent-color: var(--orange);
}

.texto-ayuda {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 6px;
}

.acciones-form {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
}
.acciones-form .btn-primario,
.acciones-form .btn-secundario {
    width: auto;
    min-width: 140px;
    align-self: center;
}
.btn-accion-principal { padding: 12px 28px; }
.btn-en-linea { width: auto; }

/* ------------------------------------------------------------------------
   ZONA LOGO (compacta: botón clickable con vista previa)
   ------------------------------------------------------------------------ */

.zona-logo-compacta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}

.vista-previa-logo-clickable {
    width: 140px; height: 140px;
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    background: var(--bg);
    overflow: hidden;
    padding: 8px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.05s;
    color: var(--text-muted);
    font-family: inherit;
}
.vista-previa-logo-clickable:hover {
    border-color: var(--orange);
    background: white;
    color: var(--orange);
}
.vista-previa-logo-clickable:active { transform: scale(0.98); }
.vista-previa-logo-clickable img {
    max-width: 100%; max-height: 100%; object-fit: contain;
}
.vista-previa-logo-clickable .sin-logo {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    color: inherit;
}
.vista-previa-logo-clickable .sin-logo svg {
    width: 32px; height: 32px;
}
.vista-previa-logo-clickable .sin-logo span {
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.6px;
}

/* Zona logo antigua (mantener para vista-previa-logo en modal) */
.zona-logo {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}
.zona-logo-vertical {
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.zona-logo-vertical .controles-logo {
    width: 100%;
}

.vista-previa-logo {
    width: 130px; height: 130px;
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    background: var(--bg);
    overflow: hidden;
    flex-shrink: 0;
    padding: 8px;
}
.vista-previa-logo img {
    max-width: 100%; max-height: 100%; object-fit: contain;
}
.sin-logo { color: var(--text-muted); font-size: 12px; }

.controles-logo {
    flex: 1;
    display: flex; flex-direction: column; gap: 6px;
    padding-top: 4px;
}
.zona-logo-vertical .controles-logo { padding-top: 0; align-items: center; }

.mensaje-error.centrado { text-align: center; }

/* ------------------------------------------------------------------------
   MODAL del logo
   ------------------------------------------------------------------------ */

dialog.modal-logo {
    width: 90%;
    max-width: 560px;
    border: none;
    border-radius: var(--radius);
    padding: 0;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    background: white;
}
dialog.modal-logo::backdrop {
    background: rgba(26, 44, 77, 0.5);
    backdrop-filter: blur(2px);
}

.modal-cabecera {
    background: var(--navy);
    color: white;
    padding: 14px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-cabecera h3 {
    margin: 0; font-size: 15px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
    color: white; position: static; border: none; background: transparent;
}
.modal-cerrar {
    background: transparent;
    border: none;
    color: white;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 0 6px;
    opacity: 0.8;
    transition: opacity 0.15s;
}
.modal-cerrar:hover { opacity: 1; }

.modal-cuerpo { padding: 22px; }

.modal-vista-previa {
    text-align: center;
    margin-bottom: 18px;
}
.modal-vista-previa .vista-previa-logo {
    margin: 0 auto;
    width: 160px; height: 160px;
}

.modal-acciones-logo {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 16px;
}

.modal-info {
    color: var(--text-dark);
    font-size: 12.5px;
    line-height: 1.55;
}
.modal-info h4 {
    color: var(--navy);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 14px 0 6px;
    font-weight: 700;
}
.modal-info h4:first-child { margin-top: 0; }
.modal-info ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.modal-info ul li {
    padding-left: 16px;
    position: relative;
    margin-bottom: 4px;
    color: var(--text-muted);
}
.modal-info ul li::before {
    content: "·";
    position: absolute;
    left: 4px;
    color: var(--orange);
    font-weight: 700;
    font-size: 18px;
    line-height: 0.5;
    top: 8px;
}
.modal-info p {
    color: var(--text-muted);
    margin: 4px 0;
}
.modal-info strong { color: var(--text-dark); }

.modal-pie {
    background: var(--border-light);
    padding: 12px 22px;
    display: flex;
    justify-content: flex-end;
}

.campo-archivo { display: inline-block; cursor: pointer; }
.input-archivo-oculto {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    opacity: 0;
}

.nombre-fichero-seleccionado {
    font-size: 11px;
    color: var(--text-muted);
    padding: 4px 0;
    font-style: italic;
    word-break: break-all;
}
.nombre-fichero-seleccionado.seleccionado {
    color: #15803d;
    font-weight: 600;
    font-style: normal;
}

/* ==========================================================================
   ELIMINAR EMPRESA
   ========================================================================== */

.ficha-empresa-resumen {
    background: white;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 18px 22px;
    display: flex; align-items: center; gap: 18px;
    margin-bottom: 20px;
}
.ficha-razon-social { font-weight: 700; color: var(--text-dark); font-size: 15px; }
.ficha-nif { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.ficha-direccion { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.caja-opciones-borrado { display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; }

.opcion-borrado {
    background: white;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 20px 24px;
    border-left: 4px solid var(--border);
}
.opcion-borrado.recomendado { border-left-color: var(--orange); }
.opcion-borrado.peligrosa   { border-left-color: var(--red); background: #fffafa; }

.opcion-borrado h3 { font-size: 15px; font-weight: 700; margin-bottom: 8px; color: var(--text-dark); }
.opcion-borrado.peligrosa h3 { color: var(--red); }
.opcion-borrado p { font-size: 13px; color: var(--text-muted); margin-bottom: 14px; }
.opcion-borrado p strong { color: var(--text-dark); }
.opcion-borrado .btn-primario,
.opcion-borrado .btn-peligro { width: auto; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {
    .fila-logo-identidad { grid-template-columns: 1fr; }
    .fila-domicilio-contacto { grid-template-columns: 1fr; }
}

/* ============================================================
   RESPONSIVE MÓVIL — NIVEL 1 (menú hamburguesa + adaptaciones)
   ============================================================ */

/* Por defecto (escritorio): hamburguesa y overlay ocultos */
.btn-hamburguesa { display: none; }
.overlay-menu { display: none; }

@media (max-width: 768px) {
    /* Layout a una columna */
    .pagina-app { grid-template-columns: 1fr; display: block; }

    /* Barra lateral se convierte en menú deslizante desde la izquierda */
    .barra-lateral {
        position: fixed;
        top: 0; left: 0;
        height: 100vh;
        width: 260px;
        z-index: 1000;
        transform: translateX(-100%);
        transition: transform 0.28s ease;
        box-shadow: 2px 0 16px rgba(0,0,0,0.3);
        overflow-y: auto;
    }
    .barra-lateral.abierto {
        transform: translateX(0);
    }

    /* Botón hamburguesa visible y fijo arriba a la izquierda */
    .btn-hamburguesa {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 12px; left: 12px;
        z-index: 1001;
        width: 44px; height: 44px;
        background: var(--navy);
        color: white;
        border: none;
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.25);
        cursor: pointer;
    }

    /* Overlay oscuro al abrir el menú */
    .overlay-menu {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.45);
        z-index: 999;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.28s ease;
    }
    .overlay-menu.visible {
        opacity: 1;
        pointer-events: auto;
    }

    /* Contenido principal a pantalla completa con hueco para el botón */
    .contenido-principal { padding: 64px 16px 24px; }

    /* Formularios y rejillas a una columna */
    .titulo-pagina { font-size: 20px; }
    .tarjetas-resumen { grid-template-columns: 1fr; }
    .rejilla-form { grid-template-columns: 1fr !important; }
    .cabecera-listado { flex-direction: column; align-items: stretch; gap: 12px; }
    .acciones-cabecera { flex-wrap: wrap; }
    .ficha-cabecera { flex-direction: column; text-align: center; }

    /* Tablas con scroll horizontal en vez de romper el layout */
    .tabla-listado,
    .tabla-pyg,
    .tabla-informe {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    .tabla-listado th, .tabla-listado td { padding: 8px 10px; font-size: 12px; }

    /* Envolver cualquier contenedor de tabla para scroll */
    .contenedor-tabla,
    .tabla-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* KPIs y gráficos a una columna */
    .pyg-resumen { grid-template-columns: 1fr !important; }
    .grid-kpis, .kpi-grid { grid-template-columns: 1fr 1fr !important; }

    /* Modales más anchos en móvil */
    .modal-contenido, .incofis-modal-caja {
        width: 92% !important;
        max-width: none !important;
        margin: 0 auto;
    }

    /* Formularios a dos columnas → una sola */
    .campos-dos-columnas,
    .form-grid,
    form .fila-doble {
        grid-template-columns: 1fr !important;
        display: grid;
        gap: 0;
    }
}

/* ============================================================
   FACTURAS — entrega 5
   ============================================================ */

/* Etiquetas de estado de factura */
.etiqueta-estado-borrador { background: var(--border-light); color: var(--text-muted); padding: 3px 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }
.etiqueta-estado-emitida  { background: rgba(26, 44, 77, 0.08); color: var(--navy); padding: 3px 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }
.etiqueta-estado-cobrada  { background: rgba(21, 128, 61, 0.12); color: #15803d; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; }
.etiqueta-estado-anulada  { background: rgba(220, 38, 38, 0.10); color: #991b1b; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; text-decoration: line-through; }

/* Tabla de líneas (factura_form) */
.tabla-lineas {
    width: 100%;
    border-collapse: collapse;
    background: white;
}
.tabla-lineas thead th {
    background: #fafbfc;
    padding: 8px 6px;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 1px solid var(--border);
    text-align: left;
}
.tabla-lineas thead th.alineado-derecha { text-align: right; }
.tabla-lineas tbody td {
    padding: 6px;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}
.tabla-lineas tbody td.alineado-derecha { text-align: right; }
.tabla-lineas tbody td.centrado { text-align: center; }
.tabla-lineas input[type="text"],
.tabla-lineas select {
    width: 100%;
    padding: 5px 6px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 13px;
    background: #f8fafc;
    box-sizing: border-box;
}
.tabla-lineas input[type="text"]:focus,
.tabla-lineas select:focus {
    outline: none;
    border-color: var(--orange);
    background: white;
    box-shadow: 0 0 0 2px rgba(232, 119, 34, 0.1);
}
.tabla-lineas input.num {
    text-align: right;
    font-family: var(--font-mono);
    font-size: 12px;
}
.tabla-lineas .total-linea {
    font-weight: 600;
    color: var(--navy);
}
.tabla-lineas .btn-mini-peligro {
    background: transparent;
    color: #b91c1c;
    border: 1px solid #fca5a5;
    width: 28px; height: 28px;
    border-radius: 6px;
    padding: 0;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
.tabla-lineas .btn-mini-peligro:hover {
    background: #fee2e2;
}

/* Caja de totales */
.caja-totales {
    background: #f7f8fa;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px 18px;
}
.caja-totales h3 {
    margin: 0 0 12px 0;
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.fila-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 0;
    font-size: 13px;
    color: var(--text);
}
.fila-total span:first-child { color: var(--text-muted); }
.fila-total span:last-child  { font-family: var(--font-mono); font-weight: 500; }
.fila-total-final {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 2px solid var(--navy);
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
}
.fila-total-final span:first-child { color: var(--navy); }
.fila-total-final span:last-child  { font-size: 17px; }

/* Ficha de factura (factura_ver) */
.ficha-factura {
    background: white;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 28px;
    margin-top: 16px;
}
.ficha-factura-cabecera {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--navy);
    margin-bottom: 20px;
    font-size: 13px;
    line-height: 1.6;
}
.ficha-factura-cabecera .emisor strong { color: var(--navy); font-size: 15px; }
.ficha-factura-cabecera .receptor { background: #fafbfc; padding: 14px; border-radius: 6px; }
.ficha-factura-cabecera .receptor-etiqueta {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.ficha-factura-cabecera .datos-factura { font-size: 13px; }
.ficha-factura-cabecera .datos-factura div { padding: 4px 0; }
.ficha-factura-cabecera .datos-factura span { color: var(--text-muted); display: inline-block; min-width: 90px; }

.totales-factura {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}
.totales-factura .caja-totales {
    min-width: 320px;
}

.alineado-derecha { text-align: right; }


/* ============================================================
   FORMULARIO DE FACTURA — layout específico (entrega 5.2)
   ============================================================ */

/* El form no tiene fondo: cada bloque es su propia tarjeta blanca */
.form-factura {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin-top: 8px;
}
.form-factura .bloque-form {
    background: white;
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 22px 26px 24px 26px;
    margin-bottom: 18px;
}
.form-factura .bloque-form:last-of-type { margin-bottom: 0; }

/* Título del bloque: pequeño, color muted, separado del contenido.
   IMPORTANTE: reseteamos position porque .bloque-form h3 a nivel general
   tiene position:absolute (estilo "pastilla flotante BBDD INCOFIS") que
   no aplica en el formulario de factura. */
.form-factura .bloque-form > h3 {
    position: static !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--border-light) !important;
    border-radius: 0 !important;
    margin: 0 0 22px 0;
    padding: 0 0 10px 0;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.7px;
    font-weight: 700;
    top: auto !important;
    left: auto !important;
    z-index: auto !important;
}

/* Fila 1 de la cabecera: empresa | serie | cliente (3 columnas iguales) */
.rejilla-factura-cabecera {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 18px;
    margin-bottom: 16px;
}
.rejilla-factura-cabecera .campo { margin-bottom: 0; }

/* Fila 2 de la cabecera: fechas estrechas + concepto ancho.
   Los fixed-widths son sutilmente más estrechos que antes (130px en vez
   de 160px) para que las fechas no parezcan inmensas. */
.rejilla-factura-datos {
    display: grid;
    grid-template-columns: 130px 130px 1fr;
    gap: 18px;
}
.rejilla-factura-datos .campo { margin-bottom: 0; }
.rejilla-factura-datos .campo-fecha input {
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 900px) {
    .rejilla-factura-cabecera { grid-template-columns: 1fr; }
    .rejilla-factura-datos    { grid-template-columns: 1fr 1fr; }
    .rejilla-factura-datos .campo-concepto { grid-column: 1 / -1; }
}

/* Tabla de líneas — anchos exactos por columna */
.tabla-lineas { table-layout: fixed; }
.tabla-lineas .col-concepto { width: 40%; }
.tabla-lineas .col-cant     { width: 7%; }
.tabla-lineas .col-precio   { width: 11%; }
.tabla-lineas .col-desc     { width: 7%; }
.tabla-lineas .col-iva      { width: 9%; }
.tabla-lineas .col-ret      { width: 9%; }
.tabla-lineas .col-total    { width: 13%; }
.tabla-lineas .col-accion   { width: 4%; }

.tabla-lineas td, .tabla-lineas th { overflow: hidden; }
.tabla-lineas td input[type="text"],
.tabla-lineas td select {
    box-sizing: border-box;
    max-width: 100%;
}

/* Botón pequeño rojo para quitar línea */
.btn-mini-x {
    background: transparent;
    color: #b91c1c;
    border: 1px solid #fecaca;
    width: 24px; height: 24px;
    border-radius: 50%;
    padding: 0;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s;
}
.btn-mini-x:hover { background: #fee2e2; border-color: #fca5a5; }

/* Bloque final: observaciones + totales lado a lado */
.rejilla-factura-final {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 18px;
    align-items: start;
    margin-bottom: 18px;
}
.rejilla-factura-final .bloque-form { margin-bottom: 0; }
.rejilla-factura-final .bloque-observaciones textarea {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    min-height: 110px;
}

@media (max-width: 900px) {
    .rejilla-factura-final { grid-template-columns: 1fr; }
}

/* Enlace mini para acciones inline (ej: + nueva serie) */
.enlace-mini {
    font-size: 11px;
    color: var(--orange);
    text-decoration: none;
    font-weight: 500;
}
.enlace-mini:hover { text-decoration: underline; }


/* Bloque de forma de pago en factura_ver */
.bloque-forma-pago {
    margin-top: 24px;
    padding: 16px 18px;
    background: #f7fafc;
    border-left: 4px solid var(--navy);
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.6;
}
.bloque-forma-pago strong { color: var(--navy); font-size: 13px; }
.bloque-forma-pago p { margin: 6px 0 10px 0; color: var(--text-muted); }
.bloque-forma-pago .datos-banco div { padding: 2px 0; }
.bloque-forma-pago .datos-banco span:first-child {
    color: var(--text-muted);
    display: inline-block;
    min-width: 100px;
}

/* Texto pie de factura personalizado */
.texto-pie-factura {
    margin-top: 16px;
    padding: 12px 14px;
    border-top: 1px dashed var(--border);
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.6;
}

/* Dato no editable mostrado en formularios (sustituto del selector cuando solo hay 1 opción) */
.dato-fijo {
    padding: 9px 12px;
    background: #f4f5f7;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    color: var(--text);
}
.dato-fijo .texto-secundario { font-size: 12px; }

/* ============================================================
   MODAL "INCOFIS ADVIERTE" — sustituye a alert()/confirm() (5.2)
   ============================================================ */

.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(2px);
}
.modal-overlay.activo { display: flex; }
.modal-incofis {
    background: white;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    max-width: 460px;
    width: calc(100% - 40px);
    overflow: hidden;
    animation: modalAparecer 0.18s ease-out;
}
@keyframes modalAparecer {
    from { transform: translateY(-10px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.modal-incofis-cabecera {
    background: var(--navy);
    color: white;
    padding: 14px 22px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.modal-incofis-cabecera::before {
    content: '!';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    background: var(--orange);
    color: white;
    border-radius: 50%;
    font-weight: 900;
    font-size: 14px;
}
.modal-incofis-cuerpo {
    padding: 22px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
}
.modal-incofis-acciones {
    padding: 14px 22px;
    background: #fafbfc;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid var(--border-light);
}

/* Variante para cobrar inline: contiene un mini formulario */
.modal-incofis-cuerpo .mini-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 8px;
}
.modal-incofis-cuerpo .mini-form label {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 4px;
    font-weight: 600;
}
.modal-incofis-cuerpo .mini-form input,
.modal-incofis-cuerpo .mini-form select {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 5px;
    font-size: 14px;
}

/* ============================================================
   SEMÁFORO DE ESTADOS — círculos 3D (5.2)
   ============================================================ */

.semaforo {
    display: inline-block;
    width: 14px; height: 14px;
    border-radius: 50%;
    vertical-align: middle;
    position: relative;
    box-shadow:
        inset -2px -2px 3px rgba(0,0,0,0.25),
        inset  2px  2px 3px rgba(255,255,255,0.45),
        0 1px 2px rgba(0,0,0,0.15);
}
.semaforo::after {
    content: '';
    position: absolute;
    top: 2px; left: 3px;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: rgba(255,255,255,0.6);
    filter: blur(1px);
}
.semaforo-borrador { background: linear-gradient(145deg, #d1d5db, #9ca3af); }
.semaforo-emitida  { background: linear-gradient(145deg, #fde68a, #f59e0b); } /* ámbar */
.semaforo-vencida  { background: linear-gradient(145deg, #fca5a5, #dc2626); } /* rojo */
.semaforo-cobrada  { background: linear-gradient(145deg, #86efac, #16a34a); } /* verde */
.semaforo-anulada  { background: linear-gradient(145deg, #6b7280, #374151); } /* gris oscuro */

/* Versión grande para usar en cabeceras de página */
.semaforo-grande {
    width: 18px; height: 18px;
}

/* ============================================================
   FILTROS POR BOTONES — chips de estado (5.2)
   ============================================================ */

.filtros-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}
.chip-estado {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px 7px 11px;
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s;
    line-height: 1;
}
.chip-estado:hover {
    background: #f7f8fa;
    border-color: #cbd5e1;
}
.chip-estado.activo {
    background: var(--navy);
    color: white;
    border-color: var(--navy);
    box-shadow: 0 2px 5px rgba(26, 44, 77, 0.25);
}
.chip-estado .chip-contador {
    background: rgba(0,0,0,0.06);
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
}
.chip-estado.activo .chip-contador {
    background: rgba(255,255,255,0.2);
    color: white;
}

/* ============================================================
   LISTADO DE FACTURAS — semáforo en primera columna (5.2)
   ============================================================ */

.tabla-listado td.col-semaforo {
    width: 30px;
    text-align: center;
    padding-left: 10px;
    padding-right: 0;
}


/* Contador en línea junto al subtítulo de listados (5.2) */
.contador-inline {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 9px;
    background: var(--border-light);
    color: var(--text-muted);
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
}

/* Botón mini verde para acción "cobrar" en el listado */
.btn-mini-cobrar {
    background: rgba(22, 163, 74, 0.1);
    color: #15803d;
    border: 1px solid rgba(22, 163, 74, 0.3);
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    margin-left: 4px;
    transition: all 0.15s;
}
.btn-mini-cobrar:hover {
    background: rgba(22, 163, 74, 0.2);
    border-color: rgba(22, 163, 74, 0.5);
}

/* Etiquetas de estado: añadimos "vencida" */
.etiqueta-estado-vencida {
    background: rgba(220, 38, 38, 0.10);
    color: #991b1b;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Renombrar etiqueta-estado-emitida a "Pendiente" en color ámbar */
.etiqueta-estado-emitida {
    background: rgba(245, 158, 11, 0.13);
    color: #92400e;
}

/* Formulario de cambio de estado (cobrar/anular/revertir) — 5.2 */
.form-cambio-estado {
    background: white;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 24px;
}
.form-cambio-estado .campo { margin-bottom: 16px; }
.form-cambio-estado .campo label {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
    font-weight: 600;
}
.form-cambio-estado .campo input,
.form-cambio-estado .campo select,
.form-cambio-estado .campo textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 5px;
    font-size: 14px;
}

/* Rejilla específica para cobrar: fecha estrecha + forma cobro */
.rejilla-cobro {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
@media (max-width: 600px) {
    .rejilla-cobro { grid-template-columns: 1fr; }
}

/* ============================================================
   SELECTOR DE PLANTILLAS DE FACTURA — entrega 6
   ============================================================ */

.selector-plantillas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
@media (max-width: 1100px) {
    .selector-plantillas { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
    .selector-plantillas { grid-template-columns: 1fr; }
}
.plantilla-opcion {
    display: block;
    background: white;
    border: 2px solid var(--border-light);
    border-radius: var(--radius);
    padding: 12px;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
}
.plantilla-opcion:hover {
    border-color: var(--orange);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.plantilla-opcion.seleccionada {
    border-color: var(--orange);
    background: rgba(232, 119, 34, 0.04);
    box-shadow: 0 0 0 1px var(--orange) inset;
}
.plantilla-opcion input[type=radio] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.plantilla-preview {
    width: 100%;
    aspect-ratio: 100 / 140;
    background: #f7f8fa;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.plantilla-info strong {
    display: block;
    font-size: 13px;
    color: var(--navy);
    margin-bottom: 3px;
}
.plantilla-info span {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
    display: block;
}

/* ============================================================
   CABECERA DE FORMULARIOS — mejor espaciado (entrega 6.1)
   ============================================================ */

/* Aire mayor entre cabecera de página y primer bloque de form */
.contenedor-panel > .cabecera-listado + .alerta,
.contenedor-panel > .cabecera-listado + .form-factura,
.contenedor-panel > .cabecera-listado + form {
    margin-top: 4px;
}

/* Reforzar separación del título principal con su subtítulo */
.cabecera-listado .titulo-pagina {
    margin-bottom: 6px;
}
.cabecera-listado .subtitulo {
    margin-top: 0;
    margin-bottom: 4px;
}

/* Y entre los bloques de form (las "tarjetas" blancas) un margen
   consistente más amplio que antes */
.form-factura .bloque-form {
    margin-bottom: 22px;
}

/* Avatar con foto (sustituye la inicial cuando hay imagen subida) */
.avatar.avatar-foto {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: transparent;
}

/* ============================================================
   FOTO DE USUARIO — formulario y listado (entrega 6.1)
   ============================================================ */

.bloque-foto-usuario {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    margin-bottom: 6px;
}
.preview-foto {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--navy), #2c4470);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
    font-size: 44px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
    border: 3px solid white;
    outline: 1px solid var(--border);
}
.preview-foto span {
    user-select: none;
}
.acciones-foto {
    flex: 1;
    padding-top: 14px;
}
.acciones-foto .btn-secundario {
    display: inline-block;
}
.acciones-foto .texto-ayuda {
    margin: 0;
    font-size: 11px;
}

/* Foto miniatura en listado de usuarios */
.foto-usuario-mini {
    width: 32px;
    height: 32px;
    min-width: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    display: inline-block;
    vertical-align: middle;
    background-color: var(--border-light);
    background-image: linear-gradient(135deg, var(--navy), #2c4470);
    color: white;
    text-align: center;
    line-height: 32px;
    font-size: 13px;
    font-weight: 600;
}
.foto-usuario-mini.con-foto {
    background-image: var(--foto-url);
    color: transparent;
}

/* ============================================================
   PAGINACIÓN — controles abajo de listado (entrega 6.1)
   ============================================================ */

.paginacion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 22px;
    padding: 14px 4px;
    flex-wrap: wrap;
    gap: 14px;
}
.paginacion-info {
    font-size: 12px;
    color: var(--text-muted);
}
.paginacion.paginacion-izq {
    justify-content: flex-start;
}
.paginacion-controles {
    display: flex;
    align-items: center;
    gap: 4px;
}
.btn-pag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 11px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 6px;
    text-decoration: none;
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    transition: all 0.15s;
}
.btn-pag:hover {
    background: #f7f8fa;
    border-color: #cbd5e1;
}
.btn-pag.activo {
    background: var(--navy);
    color: white;
    border-color: var(--navy);
}
.btn-pag.inactivo {
    color: #cbd5e1;
    pointer-events: none;
    background: #fafbfc;
}
.paginacion-puntos {
    color: var(--text-muted);
    padding: 0 6px;
    font-size: 14px;
    user-select: none;
}

/* ============================================================
   PANEL CON KPIS Y GRÁFICOS — entrega 6.1
   ============================================================ */

.kpis-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 22px;
}
@media (max-width: 1000px) { .kpis-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px)  { .kpis-grid { grid-template-columns: 1fr; } }

.kpi-card {
    background: white;
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 18px 20px;
    text-decoration: none;
    color: var(--text);
    display: block;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
    position: relative;
    overflow: hidden;
}
.kpi-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 7px; height: 100%;
    background: var(--navy);
}
.kpi-card.kpi-cobrado::before    { background: #16a34a; }
.kpi-card.kpi-pendiente::before  { background: #f59e0b; }
.kpi-card.kpi-vencido::before    { background: #dc2626; }

.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.kpi-card .kpi-etq {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 600;
    margin-bottom: 8px;
}
.kpi-card .kpi-val {
    font-size: 24px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.kpi-card.kpi-cobrado .kpi-val   { color: #15803d; }
.kpi-card.kpi-pendiente .kpi-val { color: #b45309; }
.kpi-card.kpi-vencido .kpi-val   { color: #991b1b; }

.kpi-card .kpi-sub {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 6px;
}

.graficos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}
.grafico-card {
    background: white;
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 18px 22px 22px 22px;
}
.grafico-card.grafico-ancho { grid-column: 1 / -1; }
.grafico-card h3 {
    margin: 0 0 4px 0;
    font-size: 14px;
    color: var(--navy);
    font-weight: 700;
}
.grafico-card .grafico-leyenda {
    margin: 0 0 14px 0;
    font-size: 11px;
    color: var(--text-muted);
}
.grafico-contenedor {
    position: relative;
    height: 280px;
    width: 100%;
}
.grafico-card.grafico-ancho .grafico-contenedor {
    height: 320px;
}

@media (max-width: 900px) {
    .graficos-grid { grid-template-columns: 1fr; }
    .grafico-card.grafico-ancho { grid-column: 1; }
}

/* ============================================================
   LISTADO DE FACTURAS — refinamientos (entrega 6.3)
   ============================================================ */

/* Centrar el título de la columna Acciones */
.tabla-listado th.acciones { text-align: center; }

/* Botones de acción del listado: TODOS la misma altura */
.tabla-listado .acciones a.btn-mini,
.tabla-listado .acciones button.btn-mini,
.tabla-listado .acciones button.btn-mini-cobrar {
    height: 26px;
    padding: 0 10px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 11px;
    font-weight: 600;
    vertical-align: middle;
    margin-left: 4px;
    margin-right: 0;
}
.tabla-listado .acciones a.btn-mini:first-child,
.tabla-listado .acciones button.btn-mini:first-child {
    margin-left: 0;
}

/* Etiquetas de estado más saturadas — colores INTENSOS para el listado */
.tabla-listado .etiqueta-estado-cobrada {
    background: #16a34a;          /* verde sólido */
    color: white;
    box-shadow: 0 1px 2px rgba(22,163,74,0.4);
}
.tabla-listado .etiqueta-estado-emitida {
    background: #f59e0b;          /* ámbar sólido */
    color: white;
    box-shadow: 0 1px 2px rgba(245,158,11,0.4);
}
.tabla-listado .etiqueta-estado-vencida {
    background: #dc2626;          /* rojo sólido */
    color: white;
    box-shadow: 0 1px 2px rgba(220,38,38,0.4);
}
.tabla-listado .etiqueta-estado-borrador {
    background: #9ca3af;
    color: white;
}
.tabla-listado .etiqueta-estado-anulada {
    background: #4b5563;
    color: white;
}

/* El botón "Cobrar" también más vivo */
.tabla-listado .btn-mini-cobrar {
    background: #16a34a;
    color: white;
    border-color: #15803d;
}
.tabla-listado .btn-mini-cobrar:hover {
    background: #15803d;
}

/* ============================================================
   PANEL — refinamientos (entrega 6.3)
   ============================================================ */

/* Filtro de año más visible en el panel */
.acciones-cabecera form select[name="anio"] {
    background: white;
    border: 2px solid var(--navy);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
    cursor: pointer;
    min-width: 100px;
    transition: all 0.2s;
}
.acciones-cabecera form select[name="anio"]:hover,
.acciones-cabecera form select[name="anio"]:focus {
    border-color: var(--orange);
    box-shadow: 0 2px 8px rgba(232, 119, 34, 0.25);
    outline: none;
}
.acciones-cabecera form label {
    font-size: 12px !important;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px !important;
}

/* Ralentizar animaciones de Chart.js (más calmadas) */
/* (Chart.js usa animaciones internas, las ralentizamos via JS) */

/* Avatar del sidebar como enlace (a mi_cuenta) */
.bloque-usuario .info-usuario {
    text-decoration: none;
    color: inherit;
    transition: background 0.2s;
    border-radius: 6px;
    padding: 6px;
    margin: -6px;
}
.bloque-usuario .info-usuario:hover {
    background: rgba(255,255,255,0.08);
}

/* ============================================================
   BOTONES DE COLOR ESPECÍFICO (entrega 6.4)
   ============================================================ */

/* Botón mini "Ver" / "Editar" en naranja INCOFIS */
.btn-mini.btn-mini-naranja {
    background: #fef3e8;
    color: #c2410c;
    border: 1px solid #fdba74;
    font-weight: 700;
}
.btn-mini.btn-mini-naranja:hover {
    background: #fed7aa;
    border-color: #fb923c;
    color: #9a3412;
}

/* Botón mini "PDF" en rojo Adobe Acrobat */
.btn-mini.btn-mini-pdf {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
    font-weight: 700;
}
.btn-mini.btn-mini-pdf:hover {
    background: #fee2e2;
    border-color: #ef4444;
    color: #991b1b;
}

.btn-mini.btn-mini-email {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #93c5fd;
    font-weight: 700;
}
.btn-mini.btn-mini-email:hover {
    background: #dbeafe;
    border-color: #3b82f6;
    color: #1e3a8a;
}

/* Botón grande "Descargar PDF" en factura_ver con color Adobe */
.btn-pdf-grande {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    background: #ec1c24;
    color: white;
    border: 1px solid #ec1c24;
    border-radius: 6px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(236, 28, 36, 0.25);
}
.btn-pdf-grande:hover {
    background: #c81720;
    border-color: #c81720;
    box-shadow: 0 4px 10px rgba(236, 28, 36, 0.4);
    transform: translateY(-1px);
}

/* Semáforos del listado con MUCHO más color */
.tabla-listado .semaforo {
    width: 16px;
    height: 16px;
}
.tabla-listado .semaforo-borrador  {
    background: linear-gradient(145deg, #d1d5db, #6b7280);
    box-shadow: inset -3px -3px 4px rgba(0,0,0,0.35),
                inset 3px 3px 4px rgba(255,255,255,0.55),
                0 2px 4px rgba(107,114,128,0.45);
}
.tabla-listado .semaforo-emitida {
    background: linear-gradient(145deg, #fbbf24, #d97706);
    box-shadow: inset -3px -3px 4px rgba(120,53,15,0.4),
                inset 3px 3px 4px rgba(255,255,255,0.7),
                0 2px 6px rgba(217, 119, 6, 0.55);
}
.tabla-listado .semaforo-vencida {
    background: linear-gradient(145deg, #f87171, #b91c1c);
    box-shadow: inset -3px -3px 4px rgba(127,29,29,0.5),
                inset 3px 3px 4px rgba(255,255,255,0.6),
                0 2px 8px rgba(220, 38, 38, 0.6);
}
.tabla-listado .semaforo-cobrada {
    background: linear-gradient(145deg, #4ade80, #15803d);
    box-shadow: inset -3px -3px 4px rgba(20,83,45,0.5),
                inset 3px 3px 4px rgba(255,255,255,0.65),
                0 2px 8px rgba(22, 163, 74, 0.55);
}
.tabla-listado .semaforo-anulada {
    background: linear-gradient(145deg, #4b5563, #1f2937);
    box-shadow: inset -3px -3px 4px rgba(0,0,0,0.55),
                inset 3px 3px 4px rgba(255,255,255,0.3),
                0 2px 6px rgba(31,41,55,0.5);
}

/* ============================================================
   IMPRESIÓN A4 EN UNA SOLA PÁGINA — fix doble hoja (entrega 6.4)
   ============================================================ */

@media print {
    /* Reset de márgenes del body, eliminar fondos, evitar saltos */
    html, body {
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
    }

    /* Las hojas no deben tener altura mínima forzada en impresión */
    .hoja {
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        min-height: auto !important;
        page-break-after: avoid;
        page-break-inside: auto;
    }

    /* Evitar que la barra de impresión deje un margen */
    body { padding-top: 0 !important; }
}

/* Margen lateral mayor para Cliente / Cerrar sesión del sidebar (6.4) */
.bloque-usuario {
    padding-left: 4px;
    padding-right: 4px;
}

/* ============================================================
   FICHA EMPRESA — rejilla 2x2 (entrega 6.4)
   ============================================================ */

.rejilla-empresa-2x2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.rejilla-empresa-2x2 .bloque-form {
    margin-bottom: 0;
}

/* Logo solo: ocupa una franja pequeña arriba */
.bloque-logo-solo {
    max-width: 240px;
}

@media (max-width: 900px) {
    .rejilla-empresa-2x2 { grid-template-columns: 1fr; }
}

/* ============================================================
   INFORMES — pestañas y etiquetas de acciones (entrega 6.4)
   ============================================================ */

.pestanas-informes {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}
.pestanas-informes .pestana {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    background: white;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    transition: all 0.18s;
}
.pestanas-informes .pestana:hover {
    color: var(--navy);
    border-color: var(--navy);
    background: rgba(26, 44, 77, 0.03);
}
.pestanas-informes .pestana.activa {
    color: white;
    background: var(--navy);
    border-color: var(--navy);
    box-shadow: 0 2px 6px rgba(26, 44, 77, 0.25);
}

/* KPIs de informe con tendencia */
.kpis-informe .tendencia-up   { color: #16a34a; font-weight: 700; }
.kpis-informe .tendencia-down { color: #dc2626; font-weight: 700; }

/* Etiquetas por tipo de acción de auditoría */
.etiqueta-accion-login,
.etiqueta-accion-login_fallido,
.etiqueta-accion-logout,
.etiqueta-accion-password_cambiada {
    background: #dbeafe; color: #1e40af;
}
.etiqueta-accion-login_fallido { background: #fee2e2; color: #b91c1c; }
.etiqueta-accion-login { background: #dcfce7; color: #15803d; }

.etiqueta-accion-empresa_creada,
.etiqueta-accion-empresa_modificada,
.etiqueta-accion-cliente_creado,
.etiqueta-accion-cliente_modificado,
.etiqueta-accion-usuario_creado,
.etiqueta-accion-usuario_modificado,
.etiqueta-accion-serie_creada,
.etiqueta-accion-serie_modificada {
    background: #e0e7ff; color: #4338ca;
}
.etiqueta-accion-empresa_eliminada,
.etiqueta-accion-cliente_eliminado,
.etiqueta-accion-usuario_eliminado,
.etiqueta-accion-serie_eliminada,
.etiqueta-accion-factura_eliminada {
    background: #fef2f2; color: #b91c1c;
}

.etiqueta-accion-factura_borrador  { background: #f3f4f6; color: #4b5563; }
.etiqueta-accion-factura_emitida   { background: #fef3c7; color: #b45309; }
.etiqueta-accion-factura_cobrada   { background: #d1fae5; color: #047857; }
.etiqueta-accion-factura_anulada   { background: #1f2937; color: white; }
.etiqueta-accion-factura_revertida { background: #fef3c7; color: #92400e; }

/* ============================================================
   LOGO CLICKABLE EN CABECERA DE EMPRESA (entrega 6.5)
   ============================================================ */

.ficha-logo-clickable {
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
    border: 2px solid transparent;
}
.ficha-logo-clickable:hover {
    border-color: var(--orange);
    box-shadow: 0 4px 12px rgba(232, 119, 34, 0.25);
}
.ficha-logo-clickable::after {
    content: '✎';
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: var(--orange);
    color: white;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    opacity: 0;
    transition: opacity 0.2s;
}
.ficha-logo-clickable:hover::after {
    opacity: 1;
}
.ficha-logo-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--text-muted);
    font-size: 11px;
}

/* ============================================================
   PASTILLA FLOTANTE en bloques BBDD — solo aplica fuera de
   form-factura (que tiene su propio estilo plano).
   ============================================================ */

/* Para los formularios de empresa/cliente: pequeño padding-top extra
   para que la pastilla naranja del h3 (position: absolute, top: -12px)
   no se solape con el primer campo del formulario. */
.form-empresa .bloque-form,
.form-cliente .bloque-form {
    padding-top: 28px;
}

/* Input fecha: uniformar aspecto con el resto de campos */
input[type="date"] {
    font-family: inherit;
    color: var(--text);
}
input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* ============================================================
   SELECCIÓN MÚLTIPLE DE FACTURAS (entrega 6.5)
   ============================================================ */

.barra-seleccion-mult {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, #1a2c4d, #2a4373);
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    margin-bottom: 14px;
    box-shadow: 0 4px 12px rgba(26, 44, 77, 0.25);
    animation: slideDownSeleccion 0.25s ease-out;
}
.barra-seleccion-mult.oculto { display: none; }
.barra-seleccion-mult .contador-sel {
    font-size: 13px;
}
.barra-seleccion-mult .contador-sel strong {
    font-size: 16px;
    color: #fbbf24;
}
.barra-seleccion-mult .btn-secundario {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    color: white;
}
.barra-seleccion-mult .btn-secundario:hover {
    background: rgba(255,255,255,0.25);
}

@keyframes slideDownSeleccion {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Checkbox grande en la primera columna de la tabla */
.tabla-listado .check-factura,
.tabla-listado #check-todas-facturas {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--orange);
}

/* Acciones del listado alineadas a la derecha, mismo ancho para todos */
.tabla-listado td.acciones {
    text-align: right;
    white-space: nowrap;
}
/* Reservar espacio fijo a "Cobrar" cuando no aplica (factura cobrada/anulada) */
.tabla-listado tbody tr:not(.fila-inactiva) td.acciones {
    min-width: 160px;
}

/* ============================================================
   GRUPO DE ACCIONES DEL LISTADO (entrega 6.9 — flex row-reverse)
   ============================================================
   Enfoque: alineamos los botones a la DERECHA con flex-direction
   row-reverse. Como el orden visual queda invertido respecto al
   HTML, el HTML pone Ver → PDF → Cobrar pero visualmente sale
   Cobrar | PDF | Ver alineado a la derecha. Esto significa que
   "Ver" y "PDF" están SIEMPRE en la misma posición (extrema
   derecha), independientemente de si hay Cobrar o no.
   Ya no se necesitan placeholders invisibles.                  */

.tabla-listado td.acciones {
    text-align: right !important;
    vertical-align: middle;
    white-space: nowrap;
    padding-right: 8px;
    padding-left: 4px;
    width: 1%;  /* fuerza que la columna sea lo más estrecha posible */
}

.tabla-listado .grupo-acciones {
    display: inline-flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 3px !important;
}

.tabla-listado .grupo-acciones .btn-mini {
    margin: 0 !important;
    height: 24px !important;
    padding: 0 6px !important;
    box-sizing: border-box;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    font-size: 11px !important;
}

/* Cobrar es más ancho para que destaque */
.tabla-listado .grupo-acciones .btn-mini-cobrar {
    min-width: 60px !important;
}

/* ============================================================
   MODAL DE COBRO MEJORADO (entrega 6.7)
   ============================================================ */

.cabecera-modal-cobro {
    background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
    border-left: 3px solid #16a34a;
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 18px;
}
.bloque-info-cobro {
    display: grid;
    gap: 4px;
    font-size: 13px;
}
.info-cobro-fila {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 10px;
    align-items: baseline;
}
.info-cobro-lab {
    font-size: 11px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
}

.mini-form-cobro .fila-cobro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}
.mini-form-cobro .campo-coment-cobro {
    width: 100%;
}
.mini-form-cobro .campo-coment-cobro textarea {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 13px;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    resize: vertical;
}
.mini-form-cobro label {
    display: block;
    font-size: 11px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    font-weight: 600;
}
.mini-form-cobro input,
.mini-form-cobro select {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 13px;
    font-family: inherit;
}
.texto-ayuda-modal {
    margin: 6px 0 0 0;
    font-size: 11px;
    color: #6b7280;
    line-height: 1.4;
}

/* La celda de estado se vuelve relative cuando lleva icono,
   gracias a la clase .celda-con-comentario añadida desde el HTML. */
.tabla-listado td.celda-con-comentario {
    position: relative;
}

/* Icono comentario flotando en la esquina superior derecha del badge,
   solapándose ligeramente para no empujar el badge. */
.icono-comentario-cobro {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 13px;
    cursor: help;
    line-height: 1;
    background: white;
    border-radius: 50%;
    padding: 1px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    z-index: 2;
    opacity: 0.95;
}
.icono-comentario-cobro:hover {
    opacity: 1;
    transform: scale(1.1);
    transition: transform 0.15s;
}



/* ============================================================
   AVISO DE RECURRENTES PENDIENTES (entrega 7)
   ============================================================ */

.aviso-pendientes-recurrentes {
    background: linear-gradient(135deg, #fef7e6, #fef3c7);
    border-left: 4px solid var(--orange);
    padding: 16px 22px;
    border-radius: 8px;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    gap: 18px;
    justify-content: space-between;
    box-shadow: 0 2px 8px rgba(232, 119, 34, 0.12);
}
.aviso-pendientes-recurrentes > div:first-child {
    flex: 1;
    color: #92400e;
}

/* ============================================================
   BLOQUE VERIFACTU EN factura_ver (entrega 8)
   ============================================================ */

.bloque-verifactu {
    margin-top: 18px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    overflow: hidden;
    background: white;
}
.bloque-verifactu-cab {
    background: linear-gradient(135deg, #1e293b, #334155);
    color: white;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.bloque-verifactu-cab strong { font-size: 13px; font-weight: 600; }
.bloque-verifactu-cab span { color: #cbd5e1; }
.bloque-verifactu-cuerpo {
    padding: 14px 16px;
    font-size: 12px;
}
.vf-fila {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.vf-lab {
    color: var(--text-muted);
    min-width: 130px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.vf-hash {
    font-family: 'Courier New', monospace;
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    color: #1e293b;
}
.vf-acciones {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #e2e8f0;
}

/* ============================================================
   TARJETAS DE MÓDULOS OPCIONALES (entrega 9 + ajustes 9.1)
   ============================================================ */

/* Configuración + Módulos en paralelo */
.rejilla-config-modulos {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 22px;
}
@media (min-width: 980px) {
    .rejilla-config-modulos { grid-template-columns: 1fr 1fr; align-items: start; }
}
.rejilla-config-modulos > .bloque-form { margin-bottom: 0; }

.rejilla-modulos {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

/* Tarjeta de módulo: todo en una línea */
.tarjeta-modulo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    transition: all 0.18s;
    flex-wrap: nowrap;
    min-width: 0;
}
.tarjeta-modulo:hover {
    border-color: var(--orange);
    background: #fef7e6;
}
.tarjeta-modulo.activado {
    border-color: var(--orange);
    background: linear-gradient(135deg, #fef7e6, #fef3c7);
    box-shadow: 0 1px 3px rgba(232, 119, 34, 0.15);
}
.tarjeta-modulo.activo-siempre {
    border-color: #16a34a;
    background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
    cursor: default;
}
.tarjeta-modulo input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--orange);
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
}
.tarjeta-modulo input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}
.tarjeta-modulo .modulo-icono {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}
.tarjeta-modulo .modulo-info {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: nowrap;
    overflow: hidden;
}
.tarjeta-modulo .modulo-info strong {
    font-size: 13px;
    color: var(--navy);
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}
.tarjeta-modulo .modulo-info span {
    font-size: 11px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tarjeta-modulo .modulo-estado { flex-shrink: 0; }

.badge-activado {
    background: #16a34a;
    color: white;
    font-size: 9px;
    padding: 2px 7px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    white-space: nowrap;
}
.badge-proximamente,
.badge-disponible,
.badge-modulo-activado {
    display: inline-block;
    font-size: 9px;
    padding: 3px 9px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    white-space: nowrap;
    line-height: 1.2;
}
.badge-proximamente {
    background: #e2e8f0;
    color: #475569;
}
.badge-disponible {
    background: #dcfce7;
    color: #15803d;
}
.badge-modulo-activado {
    background: var(--orange);
    color: white;
}

/* Cuando el módulo está activado: ocultamos el badge inicial y mostramos el activado */
.tarjeta-modulo .badge-modulo-activado { display: none; }
.tarjeta-modulo.activado .badge-disponible,
.tarjeta-modulo.activado .badge-proximamente { display: none; }
.tarjeta-modulo.activado .badge-modulo-activado { display: inline-block; }

/* ============================================================
   TABLA DE GASTOS V2 — Estilo Cash Flow INCOFIS (entrega 10.1)
   ============================================================ */

.contenedor-ancho { max-width: 100%; }

/* Cabecera de la pantalla Gastos: oscura, sticky en mobile */
.cabecera-gastos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    background: #0f1e38;
    color: #eef4ff;
    padding: 14px 18px;
    border-radius: 10px 10px 0 0;
    margin-bottom: 0;
}
.cab-izq h2.titulo-gastos {
    margin: 0;
    color: #eef4ff;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.3px;
}
.cab-izq .subtitulo-gastos {
    margin: 2px 0 0;
    color: #aac4e8;
    font-size: 12px;
}
.cab-der {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
}
.cab-der .ctrl-grupo {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.cab-der .ctrl-grupo label {
    font-size: 10px;
    color: #8aaad0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.cab-der .ctrl-grupo select {
    padding: 5px 8px;
    background: white;
    color: #1a1a18;
    border: 1px solid #2a4a78;
    border-radius: 5px;
    font-size: 12px;
    cursor: pointer;
    min-width: 110px;
}
.btn-cab {
    padding: 7px 14px;
    border-radius: 5px;
    border: none;
    background: #e87722;
    color: white;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    align-self: flex-end;
    transition: background 0.15s;
}
.btn-cab:hover { background: #c2611a; }
.btn-cab-excel {
    background: #1d6f42;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.btn-cab-excel:hover { background: #155030; }

/* Tarjeta contenedora de la tabla */
.card-gastos {
    background: #d4d8e0;
    border-radius: 0 0 10px 10px;
    padding: 10px;
    margin-bottom: 14px;
}
/* Variante sin fondo gris para tablas integradas (PyG, Cash Flow, Gastos) */
.card-gastos.card-limpia {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 8px;
    margin-top: 24px; /* separación extra respecto al gráfico/KPIs */
    box-shadow: none !important;
}
.card-scroll {
    overflow-x: auto;
    border-radius: 6px;
}

/* Tabla principal */
.tabla-gastos-v2 {
    border-collapse: collapse;
    width: 100%;
    min-width: 1000px;
    font-size: 11px;
    background: white;
    border-radius: 6px;
    overflow: hidden;
}
.tabla-gastos-v2 th {
    font-weight: 700;
    font-size: 10px;
    color: white;
    text-align: center;
    padding: 7px 4px;
    white-space: nowrap;
    background: #0f1e38;
    border: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.tabla-gastos-v2 th.lbl {
    text-align: left;
    position: sticky;
    left: 0;
    background: #0f1e38;
    z-index: 3;
    padding-left: 12px;
    min-width: 240px;
}
.tabla-gastos-v2 th.tot {
    border-left: 1px solid #3a5a88;
    background: #0a1428;
}
.tabla-gastos-v2 th.acc {
    width: 32px;
    background: #0a1428;
}
.tabla-gastos-v2 th.mes-actual {
    background: #e87722;
}

.tabla-gastos-v2 td {
    padding: 3px 5px;
    text-align: right;
    white-space: nowrap;
    vertical-align: middle;
    background: white;
    width: 64px;
    border: none;
    font-size: 11px;
}
.tabla-gastos-v2 td.lbl {
    text-align: left;
    position: sticky;
    left: 0;
    background: white;
    z-index: 2;
    padding-left: 12px;
    padding-right: 10px;
    width: 240px;
    min-width: 240px;
    max-width: 240px;
}
.tabla-gastos-v2 td.tot {
    border-left: 1px solid #ccc;
    font-weight: 700;
}
.tabla-gastos-v2 td.acc {
    text-align: center;
    width: 32px;
    background: white;
}

/* Fila de sección (categoría) — gris oscuro, más suave que el navy */
.tabla-gastos-v2 tr.sec > td {
    font-weight: 700;
    font-size: 10.5px;
    background: #94a3b8;
    color: white;
    padding: 7px 5px;
    letter-spacing: 0.05em;
    cursor: pointer;
    user-select: none;
}
.tabla-gastos-v2 tr.sec > td.lbl {
    background: #94a3b8;
    color: white;
    position: sticky;
    left: 0;
    z-index: 4;
}
.tabla-gastos-v2 tr.sec > td.num-cat,
.tabla-gastos-v2 tr.sec > td.num-cat-total {
    color: white;
    font-weight: 700;
}
.tabla-gastos-v2 tr.sec > td.tot {
    border-left: 1px solid #b6c0cf;
}
.tabla-gastos-v2 tr.sec > td.acc { background: #94a3b8; }
.tabla-gastos-v2 tr.sec:hover > td { background: #7e8ca0; }
.tabla-gastos-v2 tr.sec:hover > td.lbl { background: #7e8ca0; }
.tabla-gastos-v2 tr.sec:hover > td.acc { background: #7e8ca0; }
.tabla-gastos-v2 .caret {
    display: inline-block;
    width: 12px;
    color: #e2e8f0;
}

/* Filas de conceptos (hojas) */
.tabla-gastos-v2 tr.leaf2 > td {
    background: white;
}
.tabla-gastos-v2 tr.leaf2:hover > td {
    background: #fef7e6;
}
.tabla-gastos-v2 tr.leaf2:hover > td.lbl {
    background: #fef7e6;
}
.tabla-gastos-v2 tr.leaf2 > td.lbl {
    padding-left: 8px;
    color: #444;
    font-size: 11px;
}
.tabla-gastos-v2 tr.leaf2 .btn-edit-mini {
    margin-right: 4px;
    vertical-align: middle;
}
.iva-mini {
    display: inline-block;
    margin-left: 6px;
    font-size: 9px;
    color: #8a8a8a;
    background: #f1f5f9;
    padding: 1px 5px;
    border-radius: 8px;
    font-weight: 600;
}

/* Inputs de celda */
.tabla-gastos-v2 input.ci {
    width: 100%;
    border: 1px solid #d1d5db;
    background: #f8fafc;
    border-radius: 3px;
    text-align: right;
    font-size: 11px;
    font-family: inherit;
    color: #1a1a18;
    padding: 3px 5px;
    outline: none;
    box-sizing: border-box;
    transition: all 0.15s;
    cursor: pointer;
}
.tabla-gastos-v2 input.ci:hover {
    background: #ffffff;
    border-color: #9ca3af;
}
.tabla-gastos-v2 input.ci:focus {
    background: white;
    border-color: #e87722;
    box-shadow: 0 0 0 2px rgba(232, 119, 34, 0.15);
    cursor: text;
}

/* Botón editar concepto */
.tabla-gastos-v2 .btn-edit-mini {
    background: transparent;
    border: none;
    color: var(--orange);
    font-size: 15px;
    cursor: pointer;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    transition: all 0.15s;
}
.tabla-gastos-v2 .btn-edit-mini:hover {
    background: var(--orange);
    color: white;
}

/* Fila TOTAL final (estilo "caja" verde) */
.tabla-gastos-v2 tr.caja > td {
    font-weight: 700;
    font-size: 12px;
    background: #7ecaa0;
    color: #082818;
    padding: 8px 5px;
}
.tabla-gastos-v2 tr.caja > td.lbl {
    background: #7ecaa0;
    color: #082818;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.tabla-gastos-v2 tr.caja > td.tot {
    border-left: 1px solid #4a9a70;
}
.tabla-gastos-v2 tr.caja > td.acc { background: #7ecaa0; }

/* Disclaimer */
.disclaimer-gastos {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    padding: 10px 14px;
    background: white;
    border-radius: 7px;
    border: 1px solid var(--border-light);
    line-height: 1.6;
}

/* ============================================================
   OVERLAY DE GUARDADO (entrega 10.1)
   ============================================================ */

.overlay-guardar {
    position: fixed;
    inset: 0;
    background: rgba(15, 30, 56, 0.45);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.overlay-caja {
    background: white;
    padding: 22px 36px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 220px;
}
.overlay-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid #e2e8f0;
    border-top-color: var(--orange);
    border-radius: 50%;
    animation: spinIncofis 0.8s linear infinite;
}
@keyframes spinIncofis {
    to { transform: rotate(360deg); }
}
.overlay-texto {
    font-size: 14px;
    color: var(--navy);
    font-weight: 600;
}

/* ============================================================
   MODAL GENÉRICO div-based (entrega 11) — para gastos y otros
   ============================================================ */

.modal-fondo {
    position: fixed;
    inset: 0;
    background: rgba(15, 30, 56, 0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal-contenedor {
    background: white;
    border-radius: var(--radius);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 560px;
    overflow: hidden;
    animation: modalAparece 0.18s ease-out;
}
@keyframes modalAparece {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-contenedor .modal-cuerpo {
    padding: 22px;
}
.modal-contenedor .modal-cuerpo .campo { margin-bottom: 14px; }

/* ============================================================
   PYG (entrega 11)
   ============================================================ */

.tabla-pyg tr.sec-ingreso > td {
    background: #22c55e;
    color: white;
}
.tabla-pyg tr.sec-ingreso > td.lbl { background: #22c55e; }
.tabla-pyg tr.sec-ingreso > td.tot { border-left: 1px solid #4ade80; }

.tabla-pyg tr.sec-gasto > td {
    background: #fb923c;
    color: white;
}
.tabla-pyg tr.sec-gasto > td.lbl { background: #fb923c; }
.tabla-pyg tr.sec-gasto > td.tot { border-left: 1px solid #fdba74; }

.tabla-pyg tr.res-pyg > td {
    background: #1a2c4d;
    color: white;
    font-weight: 700;
    font-size: 12px;
    padding: 8px 5px;
}
.tabla-pyg tr.res-pyg > td.lbl {
    background: #1a2c4d;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.tabla-pyg tr.res-pyg > td.tot { border-left: 1px solid #4a6a98; }
.tabla-pyg .neg-pyg { color: #fca5a5 !important; }
.tabla-pyg .pos-pyg { color: #86efac !important; }

.tabla-pyg tr.acum-pyg > td {
    background: #e2e8f0;
    color: #1e293b;
    font-weight: 600;
    font-size: 10.5px;
}
.tabla-pyg tr.acum-pyg > td.lbl { background: #e2e8f0; padding-left: 28px; }
.tabla-pyg tr.acum-pyg .neg-pyg { color: #dc2626 !important; }

/* Resumen de KPIs */
.pyg-resumen {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 16px;
}
@media (min-width: 720px) {
    .pyg-resumen { grid-template-columns: repeat(3, 1fr); }
}
.pyg-kpi {
    background: white;
    border-radius: 10px;
    padding: 18px 22px;
    border-left: 12px solid var(--border);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.pyg-kpi-label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
    margin-bottom: 6px;
}
.pyg-kpi-valor {
    font-size: 26px;
    font-weight: 700;
    color: var(--navy);
}
.pyg-kpi-inicio { border-left-color: #64748b; }
.pyg-kpi-ingreso { border-left-color: #16a34a; }
.pyg-kpi-gasto { border-left-color: #e87722; }
.pyg-kpi-beneficio { border-left-color: #16a34a; }
.pyg-kpi-beneficio .pyg-kpi-valor { color: #15803d; }
.pyg-kpi-perdida { border-left-color: #dc2626; }
.pyg-kpi-perdida .pyg-kpi-valor { color: #dc2626; }

/* ============================================================
   FILTRO DE VISTA EN PANEL (entrega 11)
   ============================================================ */

.filtro-vista {
    display: inline-flex;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: white;
}
.filtro-vista-btn {
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    transition: all 0.15s;
    border: none;
    background: transparent;
    white-space: nowrap;
}
.filtro-vista-btn:hover {
    background: #f8fafc;
    color: var(--navy);
}
.filtro-vista-btn.activo {
    background: var(--orange);
    color: white;
}

/* ============================================================
   RECURRENTE: Datos + Observaciones en paralelo (entrega 12)
   ============================================================ */

.rejilla-datos-obs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 18px;
    align-items: stretch;
}
@media (min-width: 900px) {
    .rejilla-datos-obs { grid-template-columns: 1.4fr 1fr; }
}
.rejilla-datos-obs > .bloque-form { margin-bottom: 0; }

/* Textarea de observaciones con el mismo estilo que el resto de campos */
.campo-textarea-obs {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 13px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-family: inherit;
    background: #fafbfc;
    color: var(--text-dark);
    resize: vertical;
    min-height: 120px;
    line-height: 1.5;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.campo-textarea-obs:focus {
    outline: none;
    border-color: var(--navy);
    background: white;
    box-shadow: 0 0 0 3px rgba(26, 44, 77, 0.1);
}

/* Cabecera de informes: pestañas alineadas a la derecha del título */
.cabecera-informes {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}
.cabecera-informes .pestanas-informes {
    margin-bottom: 0;
}

/* ============================================================
   CASH FLOW (entrega 14)
   ============================================================ */

.caja-inicial-edit {
    background: white;
    border-radius: var(--radius);
    padding: 10px 14px;
    margin-top: 14px;
    border: 1.5px solid var(--border);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    font-size: 12px;
}
.caja-inicial-edit form {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.caja-inicial-edit label {
    font-weight: 600;
    color: var(--navy);
    font-size: 12px;
    margin: 0;
}
.caja-inicial-edit input[type="text"] {
    width: 110px;
    padding: 4px 8px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    background: #fafbfc;
    font-size: 12px;
    text-align: right;
}
.caja-inicial-edit input[type="text"]:focus {
    outline: none;
    border-color: var(--orange);
    background: white;
    box-shadow: 0 0 0 2px rgba(232, 119, 34, 0.1);
}
.caja-inicial-edit .caja-eur {
    color: var(--text-muted);
    font-size: 12px;
}
.caja-inicial-edit .btn-mini {
    padding: 4px 10px;
    font-size: 11px;
    cursor: pointer;
}
.caja-inicial-edit .caja-ayuda {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-muted);
}

/* Fila saldo final */
.tabla-cf tr.saldo-cf > td {
    background: #f1f5f9;
    color: var(--navy);
    font-weight: 700;
    font-size: 12px;
    padding: 9px 5px;
    border-top: 2px solid #94a3b8;
}
.tabla-cf tr.saldo-cf > td.lbl {
    background: #f1f5f9;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Coloreo de saldos */
.tabla-cf .saldo-verde { background: #dcfce7 !important; color: #15803d !important; }
.tabla-cf .saldo-ambar { background: #fef3c7 !important; color: #92400e !important; }
.tabla-cf .saldo-rojo  { background: #fee2e2 !important; color: #991b1b !important; }

/* Sección de gastos: ahora en cashflow muestra valores negativos en naranja */
.tabla-cf tr.sec-gasto > td { background: #fb923c; }
.tabla-cf tr.sec-gasto > td.lbl { background: #fb923c; }

/* Etiqueta serie por defecto */
.etiqueta-defecto {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 8px;
    margin-left: 6px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Campo bloqueado: muestra el valor como texto, sin posibilidad de editarlo */
.campo-bloqueado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f3f4f6;
    border: 1.5px solid #e5e7eb;
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    color: #4b5563;
    font-size: 14px;
    min-height: 38px;
    cursor: not-allowed;
    user-select: text;
}
.campo-bloqueado-icono {
    opacity: 0.45;
    font-size: 12px;
    margin-left: 8px;
}

/* Número de proforma en el listado de facturas */
.texto-proforma {
    color: #e87722;
    font-style: italic;
}

/* ============================================================
   SUPLIDOS EN FACTURA (v23)
   ============================================================ */

.bloque-suplidos {
    margin-top: 16px;
}
.bloque-suplidos h3 .texto-ayuda {
    font-size: 11px;
    color: var(--text-muted);
}

.tabla-suplidos {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
}
.tabla-suplidos thead th {
    background: #f1f5f9;
    color: #475569;
    padding: 8px 10px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border);
}
.tabla-suplidos tbody td {
    padding: 6px 6px;
    border-bottom: 1px solid #f1f5f9;
}
.tabla-suplidos input[type="text"] {
    width: 100%;
    padding: 6px 9px;
    border: 1px solid #d1d5db;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 13px;
    background: #f8fafc;
    box-sizing: border-box;
}
.tabla-suplidos input[type="text"]:focus {
    outline: none;
    border-color: var(--orange);
    background: white;
    box-shadow: 0 0 0 2px rgba(232, 119, 34, 0.1);
}
.tabla-suplidos input.num { text-align: right; }
.tabla-suplidos .td-acciones { text-align: center; width: 50px; }

/* Fila de suplidos en el bloque de totales */
.fila-suplidos-total {
    color: #b45309;
}

/* Suplidos en factura_ver (vista detalle, no PDF) */
.bloque-suplidos-ver {
    margin: 18px 0 22px;
    padding: 14px 16px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 6px;
}
.bloque-suplidos-ver .titulo-suplidos-ver {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: #92400e;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.tabla-suplidos-ver {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
}
.tabla-suplidos-ver thead th {
    text-align: left;
    font-size: 11px;
    color: #78350f;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 6px 8px;
    border-bottom: 1px solid #fde68a;
}
.tabla-suplidos-ver tbody td {
    padding: 8px;
    border-bottom: 1px dotted #fde68a;
    font-size: 13px;
    color: #1f2937;
}
.aviso-suplidos-ver {
    margin: 8px 0 0;
    font-size: 11px;
    color: #78350f;
    line-height: 1.5;
}

/* Ayuda inline a la derecha del título del campo (ahorra altura) */
label .label-ayuda {
    font-weight: 400;
    font-size: 10.5px;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0;
    margin-left: 8px;
    font-style: italic;
}

/* ============================================================
   LOGIN: Sello Verifactu (esquina sup. derecha) + soporte
   ============================================================ */

.sello-verifactu {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255,255,255,0.95);
    border: 2px solid #1a2c4d;
    border-radius: 8px;
    padding: 8px 20px 6px;
    text-decoration: none;
    color: #1a2c4d;
    font-family: 'Calibri', 'Segoe UI', system-ui, sans-serif;
    transition: all 0.2s ease;
    margin-bottom: 10px;
    align-self: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}
.sello-verifactu:hover {
    background: white;
    box-shadow: 0 8px 28px rgba(0,0,0,0.45);
    transform: translateY(-4px);
}
.sello-verifactu-marca {
    font-size: 17px;
    font-weight: 900;
    letter-spacing: -0.2px;
    line-height: 1;
    color: #1a2c4d;
}
.sello-verifactu-marca sup {
    font-size: 0.65em;
    color: #e87722;
    margin: 0 1px;
}
.sello-verifactu-pie {
    font-size: 9px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-top: 3px;
    font-weight: 700;
}

/* Bloque de soporte en el login */
.bloque-soporte-login {
    margin-top: 24px;
    padding: 14px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    text-align: center;
}
.bloque-soporte-login > p {
    margin: 0;
    font-size: 12px;
    color: #475569;
    line-height: 1.6;
}
.bloque-soporte-login .datos-soporte {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 600;
}
.bloque-soporte-login .datos-soporte a {
    color: #1a2c4d;
    text-decoration: none;
    white-space: nowrap;
}
.bloque-soporte-login .datos-soporte a:hover {
    color: #e87722;
    text-decoration: underline;
}
.bloque-soporte-login .datos-soporte .sep {
    color: #cbd5e1;
    margin: 0 6px;
}

/* Pantallas pequeñas: el sello se reduce y la caja queda accesible */
@media (max-width: 540px) {
    .sello-verifactu {
        top: 8px;
        right: 8px;
        padding: 6px 10px 4px;
    }
    .sello-verifactu-marca { font-size: 14px; }
    .sello-verifactu-pie { font-size: 8px; }
    .bloque-soporte-login .datos-soporte a { display: block; margin: 4px 0; }
    .bloque-soporte-login .datos-soporte .sep { display: none; }
}

/* Radios IVA (modal Gastos) — más visuales que un select */
.radios-iva {
    display: flex;
    gap: 8px;
    padding: 6px 0;
}
.radio-iva {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1.5px solid #d1d5db;
    border-radius: 6px;
    background: #f8fafc;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    transition: all 0.15s;
}
.radio-iva:hover {
    border-color: #94a3b8;
    background: white;
}
.radio-iva input[type="radio"] {
    margin: 0;
    accent-color: #e87722;
}
.radio-iva:has(input:checked) {
    border-color: #e87722;
    background: #fff7ed;
    color: #1a2c4d;
}

/* Modal de cobro: filas con valor truncado si es muy largo (ej. cliente).
   La fila usa flex (info-cobro-lab + strong). El strong puede crecer y
   debe quedarse en una sola línea con elipsis. */
.info-cobro-fila .info-cobro-truncar {
    max-width: 260px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* ============================================================
   SELECCIÓN DE EMPRESA (paso tras login) + conmutador sidebar
   ============================================================ */
.lista-empresas-login {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tarjeta-empresa-login {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .05s;
    font-family: inherit;
}
.tarjeta-empresa-login:hover {
    border-color: var(--orange, #e87722);
    box-shadow: 0 3px 12px rgba(0,0,0,0.08);
}
.tarjeta-empresa-login:active { transform: translateY(1px); }
.tarjeta-empresa-nombre {
    font-weight: 700;
    color: var(--navy, #1a2c4d);
    font-size: .98rem;
    flex: 1;
}
.tarjeta-empresa-nif {
    font-family: monospace;
    font-size: .8rem;
    color: #94a3b8;
}
.tarjeta-empresa-flecha {
    color: var(--orange, #e87722);
    font-size: 1.2rem;
    font-weight: 700;
}

/* Conmutador de empresa activa en el sidebar */
.conmutador-empresa {
    position: relative;
    margin: 0 12px 10px;
}
.conmutador-empresa-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    padding: 8px 10px;
    cursor: pointer;
    color: #fff;
    font-family: inherit;
    text-align: left;
}
.conmutador-empresa-btn:hover { background: rgba(255,255,255,0.14); }
.conmutador-empresa-btn .ce-nombre {
    flex: 1;
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.conmutador-empresa-btn .ce-flecha { font-size: .7rem; opacity: .7; }
.conmutador-empresa-menu {
    position: absolute;
    left: 0; right: 0; top: 100%;
    margin-top: 4px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    z-index: 100;
    overflow: hidden;
    display: none;
}
.conmutador-empresa-menu.abierto { display: block; }
.conmutador-empresa-menu a {
    display: block;
    padding: 10px 14px;
    color: var(--navy, #1a2c4d);
    text-decoration: none;
    font-size: .85rem;
    border-bottom: 1px solid #f1f5f9;
}
.conmutador-empresa-menu a:last-child { border-bottom: none; }
.conmutador-empresa-menu a:hover { background: #f8fafc; }
.conmutador-empresa-menu a.activa {
    background: #fff7ed;
    font-weight: 700;
    color: var(--orange, #e87722);
}
.conmutador-empresa-seccion {
    padding: 8px 14px 4px;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #94a3b8;
    font-weight: 700;
}
.conmutador-empresa-separador {
    height: 1px;
    background: #e2e8f0;
    margin: 4px 0;
}
.conmutador-empresa-menu a.conmutador-empresa-editar {
    color: var(--navy, #1a2c4d);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}
.conmutador-empresa-menu a.conmutador-empresa-editar::before {
    content: "✎";
    font-size: .9rem;
    color: var(--orange, #e87722);
}

/* ============================================================
   INDICADOR DE CARGA (spinner naranja corporativo)
   ============================================================ */
#cargando-global {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(1px);
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: progress;
}
#cargando-global.activo { display: flex; }
#cargando-global .spinner-incofis {
    width: 54px;
    height: 54px;
    border: 5px solid rgba(232, 119, 34, 0.2);
    border-top-color: var(--orange, #e87722);
    border-radius: 50%;
    animation: girar-spinner 0.7s linear infinite;
}
@keyframes girar-spinner {
    to { transform: rotate(360deg); }
}
/* Cursor de espera en todo el body mientras carga */
body.cargando, body.cargando * {
    cursor: progress !important;
}

/* Clase reutilizable de input con el estilo de la app (fuera de .campo) */
.campo-texto {
    padding: 10px 13px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-family: inherit;
    background: #fafbfc;
    color: var(--text-dark);
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}
.campo-texto:focus {
    outline: none;
    border-color: var(--orange);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(232, 119, 34, 0.12);
}
.campo-texto[readonly] {
    background: #f1f5f9;
    color: var(--text-muted);
    cursor: default;
}