/* ============================================================================
   FICHAS DE TERCERO (cliente y proveedor) — estilos de CONTENIDO de los tabs
   ----------------------------------------------------------------------------
   Estas clases (cf-*) las usan los componentes de Fichas/{Clientes,Proveedores}/Views,
   que se renderizan como hijos de ClienteFicha.razor / ProveedorFicha.razor. El CSS
   scoped del padre NO alcanza el DOM de los hijos, por eso los building-blocks
   compartidos viven aquí, en un único archivo global. Las dos fichas pintan el mismo
   sistema visual, así que comparten este archivo en lugar de duplicarlo.

   El shell de cada página (layout, cabecera, rail de pestañas, modal de confirmación)
   permanece en su .razor.css scoped.
   Todas las clases van prefijadas (cf-*, {cliente,proveedor}-ficha-*) → sin colisiones.
   ============================================================================ */

/* Reset heredado: debe ser global para alcanzar también el DOM de las Vistas hijas. */
.cliente-ficha-page,
.cliente-ficha-page *,
.cliente-ficha-page *::before,
.cliente-ficha-page *::after,
.proveedor-ficha-page,
.proveedor-ficha-page *,
.proveedor-ficha-page *::before,
.proveedor-ficha-page *::after {
    box-sizing: border-box;
}

/* SECCIONES */

.cf-section-grid {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
    animation: fichaTerceroContentIn 0.24s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.cf-info-card {
    min-width: 0;
    height: auto;
    align-self: stretch;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 13px;
    background: #ffffff;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.03);
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

    .cf-info-card:hover {
        border-color: #dbeafe;
        box-shadow: 0 10px 22px rgba(15, 23, 42, 0.055);
    }

.cf-info-card-full {
    grid-column: 1 / -1;
}

.cf-info-card-compact {
    padding: 12px 14px;
}

.cf-info-card-options {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.cf-info-card-bank {
    padding-bottom: 14px;
}

.cf-info-card-facturae {
    border-color: #bfdbfe;
    background: #f8fbff;
}

.cf-info-title {
    margin: 0 0 10px 0;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 850;
    color: #1f2937;
}

    .cf-info-title.no-margin {
        margin-bottom: 0;
    }

/* Rejilla de datos: varios por fila, no uno debajo de otro. Las columnas las decide el ancho REAL de
   la tarjeta (auto-fit), no el del viewport: una tarjeta estrecha reparte en menos columnas ella sola. */
.cf-info-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 6px 18px;
}

/* Variante compacta: mismo reparto, menos respiración vertical. */
.cf-info-list-compact .cf-info-row {
    padding: 4px 0;
}

/* Dato = etiqueta pequeña ARRIBA y valor debajo. Sin línea separadora: en rejilla, un borde inferior
   por celda deja bordes sueltos en la última fila; la jerarquía tipográfica ya separa los datos. */
.cf-info-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    min-height: 0;
    padding: 6px 0;
}

/* Dato ANCHO: ocupa dos columnas. Para los valores largos —una calle, un IBAN, una frase— que en una
   sola columna se partirían en varios renglones. */
.cf-info-row-wide {
    grid-column: span 2;
}

.cf-info-row span {
    max-width: 100%;
    font-size: 11px;
    color: #64748b;
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cf-info-row strong {
    max-width: 100%;
    font-size: 13px;
    color: #111827;
    font-weight: 700;
    line-height: 1.35;
    text-align: left;
    word-break: break-word;
}

.cf-observaciones-box {
    min-height: 76px;
    max-height: 140px;
    overflow-y: auto;
    border: 1px solid #edf2f7;
    background: #f8fafc;
    border-radius: 12px;
    padding: 12px;
    font-size: 12px;
    line-height: 1.45;
    color: #4b5563;
    white-space: pre-wrap;
    overscroll-behavior: contain;
}

/* DIRECCIONES */

.cf-addresses-grid,
.cf-address-list-vertical {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cf-address-card {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 12px;
    background: #ffffff;
    min-width: 0;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

    .cf-address-card:hover {
        border-color: #dbeafe;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
    }

.cf-address-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.cf-address-title {
    min-width: 0;
    font-size: 14px;
    font-weight: 850;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cf-address-badge {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    flex: 0 0 auto;
}

.cf-address-lines {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: #4b5563;
    line-height: 1.4;
}

/* BLOQUES CON GRID */

.cf-block {
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px;
    animation: fichaTerceroContentIn 0.24s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.cf-block-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.cf-block-subtitle {
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.35;
}

/* SYNCFUSION GRIDS */

.cf-grid.e-grid {
    min-height: 0;
    height: 100%;
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: none;
}

.cf-grid .e-gridheader {
    border-bottom: 1px solid #eef2f7;
}

.cf-grid .e-headercell {
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 850;
    border-color: #eef2f7;
}

.cf-grid .e-headertext {
    font-size: 12px;
    font-weight: 850;
}

.cf-grid .e-rowcell {
    color: #1f2937;
    font-size: 12px;
    border-color: #eef2f7;
    padding-top: 8px;
    padding-bottom: 8px;
}

.cf-grid .e-row:hover .e-rowcell {
    background: #f8fbff;
}

.cf-grid .e-altrow .e-rowcell {
    background: #fcfdff;
}

.cf-grid .e-pager {
    border-top: 1px solid #eef2f7;
    background: #ffffff;
    min-height: 42px;
}

.cf-grid .e-content {
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .cf-grid .e-content::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    .cf-grid .e-content::-webkit-scrollbar-track {
        background: transparent;
    }

    .cf-grid .e-content::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

        .cf-grid .e-content::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

/* BADGES */

.cf-badge-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cf-badge-list-compact {
    gap: 8px;
    align-items: flex-start;
}

.cf-flag-badge,
.cf-tag-badge,
.cf-condicion-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    border: 1px solid transparent;
    white-space: nowrap;
}

.cf-info-card-options .cf-flag-badge {
    min-height: 27px;
    padding: 0 10px;
    font-size: 11px;
}

.cf-flag-badge-on {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.cf-flag-badge-off {
    background: #f8fafc;
    color: #64748b;
    border-color: #e2e8f0;
}

.cf-tag-badge {
    background: #f8fafc;
    color: #334155;
    border-color: #e2e8f0;
}

.cf-muted-text {
    font-size: 13px;
    color: #6b7280;
}

/* Insignia de estado de la columna «Estado» en las ventanas de búsqueda (SelectorEntidad) de las
   fichas de clientes, proveedores y agentes. Vive aquí —y no en el CSS scoped de cada página— porque
   la celda se pinta dentro del componente <SelectorEntidad>, y para que las tres fichas compartan
   una única definición. Mismos colores que la insignia del navegador de cabecera (cf-estado-*). */

.cf-sel-estado {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 5px;
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.cf-sel-estado-green {
    color: #15803d;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.cf-sel-estado-orange {
    color: #b45309;
    background: #fffbeb;
    border-color: #fde68a;
}

.cf-sel-estado-red {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
}

.cf-sel-estado-gray {
    color: #64748b;
    background: #f8fafc;
    border-color: #e2e8f0;
}

/* LOGO */

.cf-logo-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cf-logo-preview {
    width: 132px;
    height: 132px;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .cf-logo-preview img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.cf-logo-placeholder {
    font-size: 12px;
    color: #9ca3af;
}

/* TARIFAS */

.cf-condiciones-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.cf-condicion-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #edf2f7;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

    .cf-condicion-item:hover {
        background: #f8fbff;
        border-color: #dbeafe;
    }

.cf-condicion-main {
    min-width: 0;
}

.cf-condicion-title {
    font-size: 13px;
    font-weight: 850;
    color: #1f2937;
}

.cf-condicion-ref {
    margin-top: 3px;
    font-size: 12px;
    color: #6b7280;
}

.cf-condicion-values {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.cf-condicion-badge {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

/* ANIMACIONES */

@keyframes fichaTerceroContentIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* RESPONSIVE — reglas de contenido (las del shell viven en ClienteFicha.razor.css) */

@media (max-width: 1280px) {
    .cf-section-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 980px) {
    .cf-block {
        height: auto;
        min-height: 420px;
        overflow-x: auto;
    }

    .cf-grid.e-grid {
        min-width: 760px;
    }
}

@media (max-width: 768px) {
    .cf-condicion-item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .cf-condicion-values {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .cf-logo-preview {
        width: 120px;
        height: 120px;
    }

    /* En móvil la tarjeta ya reparte en UNA columna: pedir dos crearía una columna implícita y
       desbordaría. El dato ancho vuelve a ocupar la única que hay. */
    .cf-info-row-wide {
        grid-column: auto;
    }

}

@media (prefers-reduced-motion: reduce) {
    .cliente-ficha-page,
    .cliente-ficha-page *,
    .cliente-ficha-page *::before,
    .cliente-ficha-page *::after,
    .proveedor-ficha-page,
    .proveedor-ficha-page *,
    .proveedor-ficha-page *::before,
    .proveedor-ficha-page *::after {
        animation: none !important;
        transition: none !important;
    }
}