/*
 * Sistema de diseno "Hagoober UI" - clases compartidas y NO aisladas (no usar CSS isolation
 * por componente para estas clases) para que cualquier pagina las pueda reutilizar tal cual.
 * Ver .claude/skills/hagoober-ui-designer/SKILL.md para la guia completa de uso.
 *
 * Colores base (deben coincidir con PaletteLight en MainLayout.razor si esta se actualiza):
 *   Primario   #2563EB
 *   Secundario #64748B
 *   Exito      #10B981
 *   Advertencia#F59E0B
 *   Peligro    #EF4444
 *   Fondo      #F8FAFC
 */

.hg-page {
    padding-bottom: 12px;
}

/* Hero / encabezado de pagina */
.hg-hero {
    padding: 24px 28px;
    border-radius: 18px;
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.12), transparent 30%),
        linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid rgba(37, 99, 235, 0.08);
}

.hg-hero__content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.hg-hero__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Barra de filtros */
.hg-filters {
    padding: 16px 20px;
    border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    background: #ffffff;
    display: flex;
    align-items: center;
}

/* Tarjetas de estadistica (KPI) con borde de color a la izquierda */
.hg-stat {
    padding: 20px 24px;
    min-height: 120px;
    border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #ffffff;
    position: relative;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.03);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hg-stat:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

.hg-stat--primary { border-left: 6px solid #2563eb; }
.hg-stat--success { border-left: 6px solid #10b981; }
.hg-stat--warning { border-left: 6px solid #f59e0b; }
.hg-stat--error   { border-left: 6px solid #ef4444; }
.hg-stat--info    { border-left: 6px solid #64748b; }

/* Avatares circulares "suaves" (fondo tenue del color, icono solido) */
.hg-avatar-soft-primary { background-color: rgba(37, 99, 235, 0.1) !important; color: #2563eb !important; border: none !important; box-shadow: 0 0 0 10px rgba(37, 99, 235, 0.05); border-radius: 50%; }
.hg-avatar-soft-success { background-color: rgba(16, 185, 129, 0.1) !important; color: #10b981 !important; border: none !important; box-shadow: 0 0 0 10px rgba(16, 185, 129, 0.05); border-radius: 50%; }
.hg-avatar-soft-warning { background-color: rgba(245, 158, 11, 0.1) !important; color: #f59e0b !important; border: none !important; box-shadow: 0 0 0 10px rgba(245, 158, 11, 0.05); border-radius: 50%; }
.hg-avatar-soft-error   { background-color: rgba(239, 68, 68, 0.1) !important; color: #ef4444 !important; border: none !important; box-shadow: 0 0 0 10px rgba(239, 68, 68, 0.05); border-radius: 50%; }

/* Pastilla de estado (ej. Borrador/Enviada/Aprobada de una cotizacion) */
.hg-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.hg-badge--secondary { background: rgba(100, 116, 139, 0.12); color: #64748b; }
.hg-badge--info       { background: rgba(37, 99, 235, 0.12); color: #2563eb; }
.hg-badge--success    { background: rgba(16, 185, 129, 0.12); color: #10b981; }
.hg-badge--warning    { background: rgba(245, 158, 11, 0.12); color: #f59e0b; }
.hg-badge--primary    { background: rgba(37, 99, 235, 0.12); color: #2563eb; }
.hg-badge--danger     { background: rgba(239, 68, 68, 0.12); color: #dc2626; }
.hg-badge--dark       { background: rgba(15, 23, 42, 0.1); color: #334155; }

/* Tarjeta de formulario/contenido generica */
.hg-card {
    padding: 20px 24px;
    border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    background: #ffffff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.03);
}

.hg-card__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

/* Icono cuadrado con fondo suave, para el encabezado del hero y de cada tarjeta */
.hg-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(37, 99, 235, 0.1);
    color: #2563eb;
    font-size: 1rem;
    flex-shrink: 0;
}

/* Panel lateral de resumen (sticky), para layouts de 2 columnas tipo formulario + totales */
.hg-summary {
    padding: 20px 24px;
    border-radius: 18px;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.08);
    position: sticky;
    top: 16px;
}

.hg-summary__total {
    padding-top: 12px;
    margin-top: 8px;
    border-top: 1px dashed rgba(15, 23, 42, 0.12);
}

/* Contenedor de tabla */
.hg-table-shell {
    padding: 18px 18px 8px;
    border-radius: 20px;
}

.hg-table-shell__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.hg-table {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: none;
}

.hg-table :deep(thead th),
.hg-table thead th {
    background: #f8fafc;
    color: #475569;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hg-table :deep(tbody tr:hover),
.hg-table tbody tr:hover {
    background: rgba(37, 99, 235, 0.03);
}

@media (max-width: 960px) {
    .hg-hero {
        padding: 20px;
    }

    .hg-filters {
        padding: 16px 16px 10px;
    }

    .hg-stat {
        min-height: 0;
    }

    .hg-summary {
        position: static;
    }
}


/* ============================================================
   Responsive global (movil <= 600px): titulos y cabeceras de pagina
   ============================================================ */
@media (max-width: 600px) {
    /* Escala tipografica reducida para encabezados de pagina */
    .mud-typography-h3 { font-size: 1.6rem !important; line-height: 1.2 !important; }
    .mud-typography-h4 { font-size: 1.4rem !important; line-height: 1.25 !important; }
    .mud-typography-h5 { font-size: 1.15rem !important; line-height: 1.3 !important; }
    .mud-typography-h6 { font-size: 1.05rem !important; }

    /* Icono que acompana al titulo (Size.Large) proporcional al texto */
    .mud-typography-h4 > .mud-icon-root,
    .mud-typography-h5 > .mud-icon-root {
        font-size: 1.6rem !important;
        width: 1.6rem;
        height: 1.6rem;
        vertical-align: middle;
    }

    /* Titulos en HTML/Bootstrap plano (h1/h2 con clase de titulo) */
    h1.fw-bold, h2.fw-bold, h2.text-primary, h1.text-primary {
        font-size: 1.4rem !important;
        line-height: 1.25;
    }

    /* Cabeceras "titulo a la izquierda + botones a la derecha": envuelven en vez de desplazarse/cortarse */
    .mud-grid-item.d-flex.justify-space-between,
    .d-flex.justify-content-between.align-items-center {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .mud-grid-item.d-flex.justify-space-between > .d-flex,
    .d-flex.justify-content-between.align-items-center > .d-flex {
        flex-wrap: wrap;
        gap: 0.5rem;
        width: 100%;
    }

    /* Botones de acciones de cabecera: se reparten el ancho, sin texto partido en 3 lineas */
    .mud-grid-item.d-flex.justify-space-between > .d-flex > .mud-button-root,
    .d-flex.justify-content-between.align-items-center > .d-flex > .btn {
        flex: 1 1 auto;
        white-space: nowrap;
    }
}


/* Tablas Bootstrap -> tarjetas en movil. Uso: <table class="table hg-cards-mobile"> y en cada <td> data-label="Etiqueta".
   Clases opcionales por celda: hg-cell-primary (bloque principal sin etiqueta), hg-cell-actions (acciones), hg-cell-full (fila de "cargando/vacio"). */
@media (max-width: 600px) {
    .table-responsive:has(> .hg-cards-mobile) { overflow: visible; }

    .hg-cards-mobile thead { display: none; }

    .hg-cards-mobile,
    .hg-cards-mobile tbody { display: block; width: 100%; }

    .hg-cards-mobile tbody tr {
        display: block;
        margin: 12px 10px;
        padding: 4px 0;
        background: #ffffff;
        border: 1px solid rgba(15, 23, 42, 0.10);
        border-radius: 14px;
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.10), 0 1px 3px rgba(15, 23, 42, 0.08);
    }

    .hg-cards-mobile tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 9px 14px !important;
        border: 0 !important;
        border-bottom: 1px dashed rgba(15, 23, 42, 0.08) !important;
        text-align: right !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .hg-cards-mobile tbody td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: 0.78rem;
        font-weight: 700;
        color: #64748b;
        text-align: left;
    }

    .hg-cards-mobile tbody td.hg-cell-primary {
        display: block;
        text-align: left !important;
        border-bottom: 1px solid #e8eef5 !important;
    }

    .hg-cards-mobile tbody td.hg-cell-actions {
        justify-content: flex-end;
        border-bottom: 0 !important;
    }

    .hg-cards-mobile tbody td.hg-cell-full {
        display: block;
        text-align: center !important;
        border-bottom: 0 !important;
    }
}

/* Linea editable de formulario (descripcion + cantidades) y barra de acciones del formulario.
   En movil cada linea se vuelve una tarjeta y los botones ocupan todo el ancho. */
.hg-line-item {
    padding: 8px 12px;
    margin-bottom: 8px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #f8fafc;
}

.hg-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.hg-totals-box {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.08);
}

/* Barra de impresion (Volver / Imprimir): se oculta al imprimir */
.hg-print-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    padding: 12px 16px;
}

@media print {
    .hg-print-toolbar { display: none !important; }
}

@media (max-width: 600px) {
    .hg-form-actions > .mud-button-root,
    .hg-form-actions > .btn { width: 100%; min-height: 44px; }
    .hg-print-toolbar > .btn { flex: 1 1 140px; min-height: 44px; }
    .hg-line-item { padding: 10px; }
}

/* ============================================================
   Contabilidad: patrones compartidos por /contabilidad/*
   (filtros, jerarquía de cuentas, líneas de asiento, resúmenes)
   ============================================================ */
.hg-ct-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    align-items: end;
    width: 100%;
}

/* El buscador de texto ocupa dos columnas en pantallas anchas; el resto de filtros una. */
.hg-ct-filters__search {
    grid-column: span 2;
}

.hg-ct-filters__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hg-table-shell__header {
    flex-wrap: wrap;
}

.hg-ct-account {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.hg-ct-code {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 8px;
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Jerarquía del plan de cuentas: la profundidad viaja como variable CSS */
.hg-ct-account {
    padding-left: calc(var(--hg-depth, 0) * 20px);
}

.hg-ct-name {
    font-weight: 600;
}

/* Botón de expandir/colapsar del árbol; el espaciador mantiene alineadas las cuentas sin hijos */
.hg-ct-toggle,
.hg-ct-toggle-spacer {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    align-self: center;
}

.hg-ct-toggle {
    padding: 2px;
}

/* Ancestros mostrados solo para dar contexto a una coincidencia de filtro */
.hg-ct-row--context .hg-ct-name,
.hg-ct-row--context .hg-ct-code {
    opacity: 0.6;
}

.hg-ct-meta {
    margin-top: 2px;
    color: #64748b;
    font-size: 0.78rem;
}

.hg-ct-dialog-body {
    max-height: 68vh;
    overflow-y: auto;
    padding-right: 4px;
}

/* Línea editable de asiento: cuenta, concepto, débito, crédito y quitar */
.hg-ct-line {
    display: grid;
    grid-template-columns: minmax(200px, 2fr) minmax(150px, 1.5fr) 110px 110px 44px;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    margin-bottom: 8px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    background: #f8fafc;
}

.hg-ct-line__actions {
    display: flex;
    justify-content: flex-end;
}

.hg-ct-line > div {
    min-width: 0;
}

/* Línea de plantilla de una regla: lado, cuenta, origen del monto, concepto y quitar */
.hg-ct-line--regla {
    grid-template-columns: 120px minmax(200px, 2fr) minmax(190px, 1.5fr) minmax(140px, 1.5fr) 44px;
}

.hg-ct-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px 18px;
    padding: 14px 16px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    background: #f8fafc;
}

.hg-ct-detail-grid span {
    display: block;
    color: #64748b;
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.hg-ct-detail-grid strong {
    font-size: 0.9rem;
}

.hg-ct-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px dashed rgba(15, 23, 42, 0.08);
    font-size: 0.9rem;
}

.hg-ct-summary-row:last-child {
    border-bottom: 0;
}

.hg-ct-summary-row span {
    color: #64748b;
}

.hg-ct-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 16px;
    text-align: center;
}

.hg-ct-table td {
    vertical-align: middle;
}

.hg-ct-search {
    display: flex;
    align-items: center;
    gap: 4px;
}

.hg-ct-search .form-control {
    min-width: 220px;
}

@media (max-width: 960px) {
    .hg-ct-line {
        grid-template-columns: 1fr 1fr;
    }

    .hg-ct-line__account,
    .hg-ct-line__concept {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    .hg-ct-filters {
        grid-template-columns: 1fr;
    }

    .hg-ct-filters__search {
        grid-column: auto;
    }

    .hg-ct-filters__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hg-ct-filters__actions > .mud-button-root {
        width: 100%;
        min-height: 44px;
    }

    .hg-ct-line {
        grid-template-columns: 1fr;
    }

    .hg-ct-dialog-body {
        max-height: none;
    }

    .hg-ct-search {
        width: 100%;
    }

    .hg-ct-search .form-control {
        width: 100%;
        min-width: 0;
    }

    .hg-ct-account {
        padding-left: calc(var(--hg-depth, 0) * 12px);
    }
}

/* Logo de banco (Tesorería): miniatura contenida, sin deformar */
.hg-banco-logo {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: 6px;
    background: #fff;
    border: 1px solid rgba(100, 116, 139, 0.25);
    flex: 0 0 auto;
}

.hg-banco-logo--lg {
    width: 72px;
    height: 72px;
}