/* ─── PresüCRM — Theme «Corporativo elegante» ────────────────────────────
   Navy tinta + acento latón sobre marfil cálido · Newsreader + IBM Plex Sans.
   El acento (activo del sidebar, botones, focus) sigue el color de marca de
   cada agencia vía las variables --primary-* de Filament (por defecto latón).
   CSS plano inyectado — no requiere build. */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&display=swap');

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
    --font-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
    --pcrm-serif: 'Newsreader', Georgia, 'Times New Roman', serif;

    --pcrm-bg: #F4F1EA;
    --pcrm-surface: #FFFFFF;
    --pcrm-surface-2: #FBF9F4;
    --pcrm-line: #E7E2D7;
    --pcrm-line-2: #EFEBE1;
    --pcrm-ink: #1B2430;
    --pcrm-text: #3D4653;
    --pcrm-muted: #66707A;

    --pcrm-nav: #1E2A38;
    --pcrm-nav-2: #243342;
    --pcrm-nav-line: #33414F;
    --pcrm-nav-text: #A9B4C0;
    --pcrm-nav-dim: #7C8896;

    --pcrm-radius: 11px;
    --pcrm-shadow: 0 1px 2px rgba(24, 33, 45, .05), 0 12px 28px -16px rgba(24, 33, 45, .16);
}

.dark {
    --pcrm-bg: #12181F;
    --pcrm-surface: #1A222C;
    --pcrm-surface-2: #202A35;
    --pcrm-line: #2B3742;
    --pcrm-line-2: #232D38;
    --pcrm-ink: #F1ECE2;
    --pcrm-text: #C6CDD6;
    --pcrm-muted: #8B94A0;

    --pcrm-nav: #161D25;
    --pcrm-nav-2: #1E2833;
    --pcrm-nav-line: #2B3742;
    --pcrm-nav-text: #A9B4C0;
    --pcrm-nav-dim: #77828F;
    --pcrm-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 30px -18px rgba(0, 0, 0, .6);
}

/* Serif editorial para títulos y cifras */
.fi-header-heading,
.fi-section-header-heading,
.fi-wi-stats-overview-stat-value,
.fi-modal-heading {
    font-family: var(--pcrm-serif) !important;
    font-weight: 500 !important;
    letter-spacing: .1px !important;
}

/* ── Sidebar (navy) ──────────────────────────────────────────────────────── */
.fi-sidebar,
.fi-sidebar-nav {
    background: var(--pcrm-nav) !important;
    border-right: 1px solid var(--pcrm-nav-line) !important;
}

.fi-sidebar-nav {
    padding: .5rem .75rem !important;
    border-right: none !important;
}

.fi-sidebar-header {
    background: var(--pcrm-nav) !important;
    padding: 1.35rem 1.1rem 1rem !important;
    border-bottom: 1px solid var(--pcrm-nav-line) !important;
}

.fi-sidebar-header a,
.fi-sidebar-header span,
.fi-sidebar .fi-logo,
.fi-sidebar .fi-brand-name {
    color: #F5F1E8 !important;
    font-family: var(--pcrm-serif) !important;
    font-weight: 600 !important;
    font-size: 1.3rem !important;
    letter-spacing: .2px !important;
}

/* ── Login (simple layout) ───────────────────────────────────────────────── */
.fi-simple-layout {
    background: var(--pcrm-bg) !important;
}

.fi-simple-main {
    border: 1px solid var(--pcrm-line) !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 60px -28px rgba(24, 33, 45, .3) !important;
    padding: 2.75rem 2.5rem !important;
    background: var(--pcrm-surface) !important;
}

.fi-simple-layout .fi-logo,
.fi-simple-layout .fi-brand-name {
    color: rgb(var(--primary-600)) !important;
    font-family: var(--pcrm-serif) !important;
    font-weight: 600 !important;
    font-size: 1.7rem !important;
    letter-spacing: .2px !important;
}

.fi-simple-header-heading {
    font-family: var(--pcrm-serif) !important;
    font-weight: 500 !important;
    color: var(--pcrm-ink) !important;
    font-size: 1.6rem !important;
}

/* Nav items */
.fi-sidebar-item-button {
    border-radius: 8px !important;
    padding: .55rem .625rem !important;
    transition: background .15s ease, color .15s ease !important;
}

.fi-sidebar .fi-sidebar-item-label,
.fi-sidebar .fi-sidebar-item-button span {
    color: var(--pcrm-nav-text) !important;
    font-size: .875rem !important;
    font-weight: 500 !important;
}

.fi-sidebar .fi-sidebar-item-icon,
.fi-sidebar .fi-sidebar-item-button svg {
    color: var(--pcrm-nav-text) !important;
    opacity: .85 !important;
    width: 1.15rem !important;
    height: 1.15rem !important;
}

.fi-sidebar-item-button:hover {
    background: rgba(255, 255, 255, .045) !important;
}

.fi-sidebar-item-button:hover .fi-sidebar-item-label,
.fi-sidebar-item-button:hover span,
.fi-sidebar-item-button:hover svg {
    color: #E7E1D5 !important;
}

/* Item activo — acento (color de marca) */
.fi-sidebar-item-active .fi-sidebar-item-button,
.fi-sidebar-item-button.fi-active,
.fi-sidebar-item-button[aria-current="page"] {
    background: rgb(var(--primary-500) / .16) !important;
    box-shadow: inset 3px 0 0 rgb(var(--primary-400)) !important;
}

.fi-sidebar-item-active .fi-sidebar-item-button .fi-sidebar-item-label,
.fi-sidebar-item-active .fi-sidebar-item-button span,
.fi-sidebar-item-button.fi-active span,
.fi-sidebar-item-button[aria-current="page"] span {
    color: #F3E9D4 !important;
    font-weight: 600 !important;
}

.fi-sidebar-item-active .fi-sidebar-item-button svg,
.fi-sidebar-item-button.fi-active svg,
.fi-sidebar-item-button[aria-current="page"] svg {
    color: rgb(var(--primary-400)) !important;
    opacity: 1 !important;
}

/* Badges de contador en nav */
.fi-sidebar-item-badge {
    background: rgba(255, 255, 255, .07) !important;
    color: var(--pcrm-nav-dim) !important;
}

/* Group labels */
.fi-sidebar-group-label,
.fi-sidebar nav .fi-sidebar-group-label {
    color: var(--pcrm-nav-dim) !important;
    font-size: .66rem !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
}

/* ── Topbar ──────────────────────────────────────────────────────────────── */
.fi-topbar {
    background: color-mix(in srgb, var(--pcrm-surface) 88%, transparent) !important;
    backdrop-filter: blur(8px) !important;
    border-bottom: 1px solid var(--pcrm-line) !important;
    box-shadow: none !important;
}

/* ── Fondo de contenido (marfil) ─────────────────────────────────────────── */
.fi-main-ctn,
.fi-main,
.fi-body {
    background: var(--pcrm-bg) !important;
}

/* ── Page header ─────────────────────────────────────────────────────────── */
.fi-header {
    padding-bottom: 1.35rem !important;
    margin-bottom: 1.5rem !important;
    border-bottom: 1px solid var(--pcrm-line) !important;
}

.fi-header-heading {
    font-size: 1.85rem !important;
    color: var(--pcrm-ink) !important;
    letter-spacing: 0 !important;
}

/* ── Stats / KPIs ────────────────────────────────────────────────────────── */
.fi-wi-stats-overview {
    gap: 1.125rem !important;
}

.fi-wi-stats-overview-stat {
    border-radius: var(--pcrm-radius) !important;
    border: 1px solid var(--pcrm-line) !important;
    background: var(--pcrm-surface) !important;
    box-shadow: var(--pcrm-shadow) !important;
    transition: box-shadow .2s ease, transform .2s ease !important;
}

.fi-wi-stats-overview-stat:hover {
    transform: translateY(-1px) !important;
}

.fi-wi-stats-overview-stat-value {
    font-size: 2rem !important;
    color: var(--pcrm-ink) !important;
    letter-spacing: .3px !important;
}

.fi-wi-stats-overview-stat-label {
    color: var(--pcrm-muted) !important;
    font-weight: 500 !important;
}

/* ── Sections / paneles ──────────────────────────────────────────────────── */
.fi-section,
.fi-wi-table,
.fi-wi-chart {
    border-radius: var(--pcrm-radius) !important;
    border: 1px solid var(--pcrm-line) !important;
    background: var(--pcrm-surface) !important;
    box-shadow: var(--pcrm-shadow) !important;
}

.fi-section-header,
.fi-section-content-ctn {
    border-color: var(--pcrm-line-2) !important;
}

.fi-section-header-heading {
    font-size: 1.05rem !important;
    color: var(--pcrm-ink) !important;
}

/* ── Tablas ──────────────────────────────────────────────────────────────── */
.fi-ta,
.fi-ta-ctn {
    border-radius: var(--pcrm-radius) !important;
    overflow: hidden !important;
}

.fi-ta-header-cell {
    font-size: .7rem !important;
    font-weight: 600 !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
    color: var(--pcrm-muted) !important;
    background: var(--pcrm-surface-2) !important;
}

.fi-ta-row:hover .fi-ta-cell {
    background: var(--pcrm-surface-2) !important;
}

/* Densidad más ajustada y legible */
.fi-ta-cell {
    padding-top: .3rem !important;
    padding-bottom: .3rem !important;
}

/* Acciones de fila como botones-icono en caja (definidas con ->iconButton()) */
.fi-ta-actions {
    gap: .3rem !important;
    justify-content: flex-end !important;
}

.fi-ta-actions .fi-icon-btn {
    /* Anula el -m-1.5 de Filament, que cancelaba el gap y solapaba los botones. */
    margin: 0 !important;
    height: 2rem !important;
    width: 2rem !important;
    border: 1px solid var(--pcrm-line) !important;
    border-radius: 8px !important;
    background: var(--pcrm-surface) !important;
    color: var(--pcrm-text) !important;
}

.fi-ta-actions .fi-icon-btn:hover {
    background: var(--pcrm-surface-2) !important;
    border-color: var(--pcrm-muted) !important;
}

.fi-ta-actions .fi-icon-btn.fi-color-danger {
    color: #B23A48 !important;
}

/* ── Botones ─────────────────────────────────────────────────────────────── */
.fi-btn {
    border-radius: 9px !important;
    font-weight: 600 !important;
    font-size: .875rem !important;
    transition: all .15s ease !important;
}

.fi-btn.fi-color-primary,
.fi-btn-color-primary {
    box-shadow: 0 6px 16px -8px rgb(var(--primary-600) / .6) !important;
}

.fi-btn.fi-color-primary:hover,
.fi-btn-color-primary:hover {
    transform: translateY(-1px) !important;
}

/* ── Badges ──────────────────────────────────────────────────────────────── */
.fi-badge {
    border-radius: 999px !important;
    font-weight: 600 !important;
    font-size: .72rem !important;
    padding: .2rem .65rem !important;
    border: 1px solid rgba(0, 0, 0, .04) !important;
}

/* ── Inputs ──────────────────────────────────────────────────────────────── */
.fi-input,
.fi-select-input,
.fi-input-wrp {
    border-radius: 9px !important;
    font-size: .875rem !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
}

/* Borde real y consistente en todos los inputs. El "borde" nativo de Filament
   es un ring por box-shadow que en algunos campos (p. ej. el email autofocado
   del login) se computaba como `none` y dejaba el input sin marco. */
.fi-input-wrp {
    border: 1px solid var(--pcrm-line) !important;
    box-shadow: 0 1px 2px rgba(24, 33, 45, .04) !important;
}

.fi-input-wrp:focus-within {
    border-color: rgb(var(--primary-500)) !important;
    box-shadow: 0 0 0 3px rgb(var(--primary-500) / .18) !important;
}

/* ── Formularios (crear / editar) ────────────────────────────────────────── */
.fi-fo-field-wrp-label,
.fi-fo-field-wrp-label > * {
    font-weight: 500 !important;
    color: var(--pcrm-ink) !important;
}

.fi-section-header-description,
.fi-fo-field-wrp-hint,
.fi-fo-field-wrp-helper-text {
    color: var(--pcrm-muted) !important;
    font-size: .8rem !important;
}

/* Icono de la cabecera de sección en acento de marca */
.fi-section-header-icon-ctn,
.fi-section-header .fi-icon {
    color: rgb(var(--primary-500)) !important;
    background: rgb(var(--primary-500) / .1) !important;
    border-radius: 9px !important;
}

/* Repetidores (líneas de factura / presupuesto) */
.fi-fo-repeater-item {
    border-radius: 10px !important;
    border-color: var(--pcrm-line) !important;
    box-shadow: 0 1px 2px rgba(24, 33, 45, .04) !important;
}

.fi-fo-repeater-item-header {
    border-bottom-color: var(--pcrm-line-2) !important;
}

/* Prefijo / sufijo de inputs (€, %) */
.fi-input-wrp-prefix,
.fi-input-wrp-suffix {
    color: var(--pcrm-muted) !important;
    font-weight: 500 !important;
}

/* Acciones del formulario */
.fi-form-actions {
    margin-top: .75rem !important;
    padding-top: 1.25rem !important;
    border-top: 1px solid var(--pcrm-line) !important;
}

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.fi-tabs-item {
    font-weight: 500 !important;
    font-size: .875rem !important;
    border-radius: 8px !important;
}

/* ── Breadcrumbs ─────────────────────────────────────────────────────────── */
.fi-breadcrumbs {
    font-size: .8rem !important;
}

/* ── Notifications / modales ─────────────────────────────────────────────── */
.fi-no-notification {
    border-radius: var(--pcrm-radius) !important;
    box-shadow: 0 8px 24px rgba(24, 33, 45, .14) !important;
    border: 1px solid var(--pcrm-line) !important;
}

.fi-modal-window {
    border-radius: 16px !important;
    box-shadow: 0 24px 60px rgba(24, 33, 45, .22) !important;
}

/* ── Badge de agencia activa en topbar ───────────────────────────────────── */
.fi-topbar .agency-badge {
    font-family: var(--pcrm-serif);
}

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #D3CCBE;
    border-radius: 4px;
}
.dark ::-webkit-scrollbar-thumb {
    background: #33414F;
}
::-webkit-scrollbar-thumb:hover {
    background: #B9B0A0;
}

/* ── Barra de progreso (tarjetas de proyecto) ────────────────────────────── */
.progress-bar-wrap {
    background: var(--pcrm-line);
    border-radius: 9999px;
    height: 6px;
    overflow: hidden;
}
.progress-bar-fill {
    height: 100%;
    border-radius: 9999px;
    background: linear-gradient(90deg, rgb(var(--primary-600)), rgb(var(--primary-400)));
    transition: width .4s ease;
}

/* ── Contenido más ancho: aprovechar la pantalla, menos espacio vacío ──
   ~1800px (≈94% en 1920) y 96vw por debajo; el enum del panel queda de respaldo. */
.fi-main {
    max-width: min(96vw, 1800px) !important;
}

/* ── Filas de tabla más compactas ──────────────────────────────────────────
   El contenido de la celda trae py-4 (1rem) que se suma al padding de .fi-ta-cell;
   lo anulamos y dejamos el espaciado en la celda. */
.fi-ta-text {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.3 !important;
    min-height: 0 !important;
}
.fi-ta-header-cell {
    padding-top: .55rem !important;
    padding-bottom: .55rem !important;
}

/* Igualar altura de las tres cards de la cabecera del presupuesto (Cliente,
   Estado, Contabilidad): la sección llena la celda del grid, que ya se estira. */
.fi-section.h-full { height: 100% !important; }

/* ── Informes ──────────────────────────────────────────────────────────────
   Utilidades de Tailwind que el tema del panel NO compila (el resto —grid,
   grid-cols-1/2, gap-*, p-3/4/6, md:grid-cols-2/3— sí están). Sin ellas las
   cards de informes quedaban sin padding ni columnas. */
.p-5 { padding: 1.25rem; }
.mt-4 { margin-top: 1rem; }
.mb-3 { margin-bottom: .75rem; }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 768px) {
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}