/*
 * Custom overrides de digifactu.
 * Se carga DESPUÉS de style.css en los layouts para sobrescribir reglas.
 */

/* ===== Sidebar: logo full vs mini al colapsar ===== */

.app-logo-full { display: flex; align-items: center; }
.app-logo-mini { display: none; }

@media screen and (min-width: 1025px) {
    /* Sidebar COLAPSADO (no hover): oculta el logo grande, muestra el mini */
    .wrapper.toggled:not(.sidebar-hovered) .app-logo-full { display: none !important; }
    .wrapper.toggled:not(.sidebar-hovered) .app-logo-mini { display: flex !important; }
}


.app-logo-mini .logo-mini-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #3b82f6;
    color: #fff;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    text-transform: uppercase;
}

/* Evita que el logo grande se desborde en pantallas pequeñas */
.app-logo-full img {
    object-fit: contain;
}

/* ===== Gradient backgrounds usados en topbar.apps ===== */
.bg-gradient-purple { background: linear-gradient(45deg, #4f46e5, #7c3aed); }
.bg-gradient-info   { background: linear-gradient(45deg, #0ea5e9, #38bdf8); }
.bg-gradient-success{ background: linear-gradient(45deg, #18bb6b, #34d399); }
.bg-gradient-danger { background: linear-gradient(45deg, #ef4444, #f87171); }
.bg-gradient-warning{ background: linear-gradient(45deg, #f59e0b, #fbbf24); }
.bg-gradient-branding { background: linear-gradient(45deg, #3b82f6, #60a5fa); }

/* ===== Fix overflow horizontal del contenido central (tarea 106) =====
   Evita que dropdowns posicionados de forma absoluta, tablas anchas o el
   buscador de cliente provoquen scroll horizontal en la página. */
html, body { overflow-x: hidden; }
.page-content-wrapper, .page-content { overflow-x: hidden; max-width: 100%; }
.table-responsive { max-width: 100%; }

/* ===== Sidebar oscuro (tarea 108) + header en blanco (tarea 126) =====
   Sidebar lateral oscuro (negro/grafito) pero la cabecera del sidebar
   (donde va el logo) en blanco para que combine con la topbar y cada
   empresa pueda mostrar su logo con sus colores originales. */
.sidebar-wrapper { background-color: #1a1d23 !important; }
.sidebar-wrapper .sidebar-header {
    background-color: #ffffff !important;
    border-right-color: #e5e7eb !important;
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

/* Toggle icon visible sobre el fondo blanco de la cabecera */
.sidebar-wrapper .sidebar-header .toggle-icon { color: #5e5e5e !important; }
.sidebar-wrapper .sidebar-header .logo-text { color: #1c1c1c !important; }

/* Logo: tal cual lo sube la empresa, sin invertir */
.sidebar-wrapper .sidebar-header img { filter: none !important; }

/* Items del menú */
.sidebar-wrapper .metismenu a {
    color: #cbd5e1 !important;
}
.sidebar-wrapper .metismenu a:hover,
.sidebar-wrapper .metismenu a:focus {
    background: rgba(59, 130, 246, 0.12) !important;
    color: #ffffff !important;
}
.sidebar-wrapper .metismenu .mm-active > a {
    background: rgba(59, 130, 246, 0.20) !important;
    color: #ffffff !important;
}

/* Icono del item (parent-icon) y la flecha */
.sidebar-wrapper .metismenu .parent-icon ion-icon { color: #93c5fd; }
.sidebar-wrapper .metismenu .has-arrow:after { border-color: #93c5fd; }

/* Sub-items desplegables */
.sidebar-wrapper .metismenu ul {
    background-color: #1f232b !important;
}
.sidebar-wrapper .metismenu ul a {
    color: #cbd5e1 !important;
}
.sidebar-wrapper .metismenu ul a:hover {
    color: #ffffff !important;
}

/* Etiqueta de sección (Operativa, Mi cuenta, Información) */
.sidebar-wrapper .metismenu .menu-label {
    color: #94a3b8 !important;
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

/* Scrollbar de simplebar oscuro */
.sidebar-wrapper .simplebar-scrollbar:before { background: #475569 !important; }

/* ===== Tabla de conceptos estilo Holded =====
   Más aireada, thead en gris claro, sin bordes verticales. */
.tabla-presupuesto-holded {
    margin: 0;
}
.tabla-presupuesto-holded thead th {
    background: #f3f4f6;
    color: #6b7280;
    font-weight: 600;
    text-transform: none;
    border-bottom: 1px solid #e5e7eb;
    font-size: 13px;
    padding: 12px 8px;
}
.tabla-presupuesto-holded tbody td {
    padding: 8px;
    border-color: #f1f5f9;
}
.tabla-presupuesto-holded .form-control,
.tabla-presupuesto-holded .form-select {
    border-color: #e5e7eb;
    background-color: #fff;
}
.tabla-presupuesto-holded .form-control:focus,
.tabla-presupuesto-holded .form-select:focus {
    border-color: #93c5fd;
    box-shadow: 0 0 0 .15rem rgba(147, 197, 253, .25);
}
.tabla-presupuesto-holded .btn-eliminar-linea ion-icon {
    font-size: 18px;
    color: #94a3b8;
}
.tabla-presupuesto-holded .btn-eliminar-linea:hover ion-icon {
    color: #ef4444;
}
.tabla-presupuesto-holded .concepto-results .list-group-item {
    border-color: #f1f5f9;
}

/* ===== Snapshot del cliente (tarea 136) =====
   Bloque de datos del cliente embebido en factura/presupuesto: visualmente
   se nota que es información derivada/secundaria, en gris suave. */
.snapshot-cliente {
    background-color: #f8fafc !important;
    border: 1px dashed #e2e8f0 !important;
}
.snapshot-cliente .form-label {
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 4px;
}
.snapshot-cliente .form-control {
    background-color: #ffffff;
    border-color: #e2e8f0;
    color: #334155;
}
.snapshot-cliente .form-control:focus {
    border-color: #93c5fd;
    box-shadow: 0 0 0 .2rem rgba(147, 197, 253, .25);
}

/* ===== Tarjetas de módulo en admin/empresas/show (tarea 146) ===== */
.modulo-card {
    display: block;
    cursor: pointer;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px;
    background: #fff;
    height: 100%;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.modulo-card:hover {
    border-color: #93c5fd;
    box-shadow: 0 4px 12px rgba(59, 130, 246, .08);
}
.modulo-card.modulo-card-active {
    border-color: #3b82f6;
    background: #eff6ff;
}
.modulo-card-icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    background: #dbeafe;
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.modulo-card.modulo-card-active .modulo-card-icon {
    background: #3b82f6;
    color: #fff;
}
.modulo-card-title { font-size: 15px; }

/* ===== Snapshot cliente compacto en presupuestos (tarea 162) ===== */
.snapshot-cliente-compact {
    background: #f8fafc;
    border: 1px dashed #e2e8f0;
    border-radius: 8px;
    padding: 10px 14px;
}
.snapshot-cliente-compact .small { line-height: 1.35; }

/* ===== Galería de fotos en proyectos (tarea 164) ===== */
.proyecto-galeria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}
.proyecto-foto {
    position: relative;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    background: #f8fafc;
    aspect-ratio: 4 / 3;
}
.proyecto-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.proyecto-foto .btn-borrar-foto {
    position: absolute;
    top: 4px; right: 4px;
    background: rgba(255, 255, 255, .92);
    border: 0;
    color: #ef4444;
    padding: 0;
    width: 26px; height: 26px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
    opacity: 0; transition: opacity .15s;
}
.proyecto-foto:hover .btn-borrar-foto { opacity: 1; }
.proyecto-foto .btn-borrar-foto ion-icon { font-size: 20px; }

/* ===== Defensivos: limitar tamaño de iconos sueltos =====
   En algunas vistas los SVG del paginador y el botón "back to top"
   se renderizan enormes si no tienen tamaño explícito. */
.pagination .page-link svg {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
}
.back-to-top {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.back-to-top ion-icon { font-size: 20px; }
/* Por si algún ion-icon pierde su tamaño en una vista concreta */
.dropdown-item ion-icon { font-size: 18px; }
.btn ion-icon { font-size: 1em; vertical-align: middle; }