/* ============================================================
   Citio — Estilos compartidos para vistas de detalle
   Usadas en: presupuestos, orden-servicios, transacciones,
              cuenta-plazos, cuenta-recurrentes
   Variables: --acento (color principal del registro)
   ============================================================ */

/* === HEADER === */
.citio-header {
    background: white;
    border: 1px solid rgb(209 213 219);
    border-left: 4px solid var(--acento, #6b7280);
    border-radius: 0.6rem;
    padding: 0.85rem 1rem;
    margin-bottom: 0.6rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.dark .citio-header { background: rgba(17, 24, 39, 0.6); border-color: rgba(255, 255, 255, 0.08); box-shadow: none; }
.citio-header-grid {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 0.75rem;
}
.citio-header-title-row {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.25rem;
}
.citio-folio {
    font-family: ui-monospace, monospace;
    font-size: 1rem; font-weight: 700;
    color: var(--acento, #6b7280);
}
.citio-subject {
    font-size: 1.05rem; font-weight: 700; color: rgb(17 24 39);
}
.dark .citio-subject { color: rgb(229 231 235); }
.citio-subject-meta {
    color: rgb(75 85 99); font-size: 0.75rem; margin-top: 0.1rem;
}
.citio-total-label {
    color: rgb(75 85 99); font-size: 0.68rem;
    text-transform: uppercase; letter-spacing: 0.04em;
    font-weight: 600;
}
.citio-total-value {
    font-size: 1.55rem; font-weight: 800;
    color: var(--acento, #6b7280); line-height: 1.1;
}
.citio-total-meta {
    font-size: 0.72rem; color: rgb(75 85 99); margin-top: 0.1rem; font-weight: 500;
}
.citio-total-meta.rojo { color: #ef4444; }

/* === STATUS BADGE === */
.citio-status-badge {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.2rem 0.55rem; border-radius: 9999px;
    font-size: 0.72rem; font-weight: 600;
    background: var(--color, #6b7280)20; color: var(--color, #6b7280);
}

/* === TABS === */
.citio-tabs-nav {
    display: flex; gap: 0.25rem;
    border-bottom: 2px solid rgb(209 213 219);
    margin-bottom: 0.75rem; overflow-x: auto;
}
.dark .citio-tabs-nav { border-bottom-color: rgba(255, 255, 255, 0.08); }
.citio-tab-btn {
    padding: 0.5rem 0.85rem; font-size: 0.8rem; font-weight: 600;
    color: rgb(75 85 99); background: transparent; border: none;
    border-bottom: 2px solid transparent; cursor: pointer;
    display: flex; align-items: center; gap: 0.35rem; white-space: nowrap;
    transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}
.citio-tab-btn:hover { color: rgb(55 65 81); background: rgba(0, 0, 0, 0.02); }
.dark .citio-tab-btn:hover { color: rgb(229 231 235); background: rgba(255, 255, 255, 0.03); }
.citio-tab-btn[aria-selected="true"] {
    color: var(--acento, #6b7280);
    border-bottom-color: var(--acento, #6b7280);
}
.citio-tab-btn .count {
    background: rgb(229 231 235); color: rgb(55 65 81);
    padding: 0.05rem 0.4rem; border-radius: 9999px;
    font-size: 0.65rem; font-weight: 700;
}
.dark .citio-tab-btn .count { background: rgba(255, 255, 255, 0.1); color: rgb(229 231 235); }
.citio-tab-btn[aria-selected="true"] .count {
    background: var(--acento, #6b7280)20;
    color: var(--acento, #6b7280);
}

/* === INFO CARDS === */
.citio-card {
    background: white;
    border: 1px solid rgb(209 213 219);
    border-radius: 0.55rem;
    padding: 0.8rem 0.9rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.dark .citio-card { background: rgba(17, 24, 39, 0.6); border-color: rgba(255, 255, 255, 0.08); box-shadow: none; }
.citio-card-title {
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: rgb(55 65 81); margin-bottom: 0.55rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgb(203 213 225);
    display: flex; align-items: center; gap: 0.3rem;
}
.dark .citio-card-title {
    color: rgb(156 163 175);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
.citio-row {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 0.42rem 0;
    border-bottom: 1px solid rgb(203 213 225);
}
.dark .citio-row { border-bottom-color: rgba(255, 255, 255, 0.06); }
.citio-row:last-child { border-bottom: none; }
.citio-row-label {
    font-size: 0.72rem; color: rgb(75 85 99); font-weight: 500;
}
.dark .citio-row-label { color: rgb(156 163 175); }
.citio-row-value {
    font-size: 0.82rem; font-weight: 600;
    color: rgb(17 24 39); text-align: right;
}
.dark .citio-row-value { color: rgb(229 231 235); }

/* === GRIDS === */
.citio-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
.citio-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.6rem; }
@media (max-width: 1000px) {
    .citio-grid-2, .citio-grid-3 { grid-template-columns: 1fr; }
}
.citio-grid-side {
    display: grid; grid-template-columns: 1fr 320px; gap: 0.75rem;
}
@media (max-width: 1100px) {
    .citio-grid-side { grid-template-columns: 1fr; }
}

/* === TABLA DE ITEMS === */
.citio-table {
    width: 100%; border-collapse: separate; border-spacing: 0;
    background: white; border-radius: 0.55rem; overflow: hidden;
    border: 1px solid rgb(209 213 219);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.dark .citio-table { background: rgba(17, 24, 39, 0.6); border-color: rgba(255, 255, 255, 0.08); box-shadow: none; }
.citio-table thead th {
    background: rgb(249 250 251); padding: 0.5rem 0.65rem;
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.03em; color: rgb(55 65 81); text-align: left;
    border-bottom: 1px solid rgb(209 213 219);
}
.dark .citio-table thead th {
    background: rgba(255, 255, 255, 0.03); color: rgb(156 163 175);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
.citio-table tbody td {
    padding: 0.55rem 0.65rem; font-size: 0.82rem;
    border-bottom: 1px solid rgb(203 213 225); color: rgb(31 41 55);
}
.dark .citio-table tbody td { color: rgb(229 231 235); border-bottom-color: rgba(255, 255, 255, 0.05); }
.citio-table tbody tr:last-child td { border-bottom: none; }
.citio-table tbody tr:hover { background: rgb(249 250 251); }
.dark .citio-table tbody tr:hover { background: rgba(255, 255, 255, 0.02); }

.citio-table th.text-right, .citio-table td.text-right,
td.text-right, th.text-right {
    text-align: right !important; font-variant-numeric: tabular-nums;
}
.citio-table th.text-center, .citio-table td.text-center,
td.text-center, th.text-center { text-align: center !important; }

.citio-clave {
    font-family: ui-monospace, monospace; font-size: 0.68rem;
    font-weight: 700; padding: 0.15rem 0.4rem;
    background: #f59e0b20; color: #f59e0b; border-radius: 0.3rem;
}
.citio-code {
    font-family: ui-monospace, monospace; font-size: 0.78rem;
    padding: 0.1rem 0.35rem; background: rgba(14, 165, 233, 0.1);
    color: #0ea5e9; border-radius: 0.25rem;
}

/* === CARD DE TOTALES === */
.citio-totales-card {
    background: #ffffff;
    color: rgb(17 24 39);
    border-radius: 0.85rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgb(226 232 240);
    border-inline-start: 4px solid var(--acento, #f59e0b);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 6px 20px rgba(15, 23, 42, 0.05);
    position: sticky;
    top: 1rem;
}
.dark .citio-totales-card {
    background: linear-gradient(135deg, #0a0a0a, #1a1a1a);
    color: white;
    border: 1px solid var(--acento, #6b7280);
    border-inline-start-width: 1px;
    box-shadow: none;
}
.citio-totales-row {
    display: flex; justify-content: space-between;
    padding: 0.35rem 0; font-size: 0.82rem;
    color: rgb(55 65 81);
    font-variant-numeric: tabular-nums;
}
.dark .citio-totales-row { color: rgb(209 213 219); }
.citio-totales-row span:last-child { font-weight: 700; color: rgb(15 23 42); }
.dark .citio-totales-row span:last-child { color: rgb(229 231 235); }
.citio-totales-row.total {
    border-top: 1px solid rgb(226 232 240);
    margin-top: 0.4rem; padding-top: 0.6rem;
    font-size: 1.1rem; font-weight: 700; color: rgb(15 23 42);
}
.dark .citio-totales-row.total {
    border-top-color: rgba(255, 255, 255, 0.15);
    color: white;
}
.citio-totales-row.total .valor { color: var(--acento, #f59e0b); font-weight: 800; }

/* === HISTORIAL === */
.citio-hist-item {
    display: flex; gap: 0.6rem; padding: 0.55rem 0.35rem;
    border-bottom: 1px solid rgb(229 231 235 / 0.5);
    align-items: flex-start;
}
.dark .citio-hist-item { border-bottom-color: rgba(255, 255, 255, 0.06); }
.citio-hist-item:last-child { border-bottom: none; }
.citio-hist-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.72rem; font-weight: 700; color: white;
    flex-shrink: 0; border: 2px solid white;
    box-shadow: 0 0 0 2px var(--avatar-color, #6b7280);
}
.dark .citio-hist-avatar { border-color: rgb(17 24 39); }
.citio-hist-content { flex: 1; font-size: 0.78rem; min-width: 0; }
.citio-hist-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.4rem; margin-bottom: 0.15rem; flex-wrap: wrap;
}
.citio-hist-badge {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.1rem 0.45rem; border-radius: 0.25rem;
    background: var(--estatus-color, #6b7280)15;
    color: var(--estatus-color, #6b7280);
    font-size: 0.68rem; font-weight: 600;
}
.citio-hist-date { font-size: 0.65rem; color: rgb(107 114 128); white-space: nowrap; }
.citio-hist-user { font-size: 0.72rem; font-weight: 600; color: rgb(55 65 81); margin-bottom: 0.1rem; }
.dark .citio-hist-user { color: rgb(229 231 235); }
.citio-hist-comment {
    color: rgb(75 85 99); font-size: 0.74rem;
    padding: 0.3rem 0.5rem; background: rgb(249 250 251);
    border-radius: 0.3rem; margin-top: 0.2rem;
}
.dark .citio-hist-comment { color: rgb(209 213 219); background: rgba(255, 255, 255, 0.03); }

/* === BARRA DE PROGRESO === */
.citio-progress {
    height: 0.65rem; background: rgb(229 231 235);
    border-radius: 9999px; overflow: hidden; margin: 0.35rem 0;
}
.dark .citio-progress { background: rgba(255, 255, 255, 0.08); }
.citio-progress-fill {
    height: 100%; background: var(--acento, #6b7280);
    border-radius: 9999px; transition: width .3s;
}

/* === STAT TILES === */
.citio-stat-tile {
    background: white; border: 1px solid rgb(229 231 235);
    border-radius: 0.55rem; padding: 0.75rem; text-align: center;
}
.dark .citio-stat-tile { background: rgba(17, 24, 39, 0.6); border-color: rgba(255, 255, 255, 0.08); }
.citio-stat-label {
    color: rgb(107 114 128); font-size: 0.64rem;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.citio-stat-value { font-size: 1.35rem; font-weight: 700; line-height: 1.15; margin-top: 0.15rem; }
.citio-stat-meta { font-size: 0.7rem; color: rgb(107 114 128); margin-top: 0.1rem; }

/* === MISC === */
.citio-notas-box {
    background: rgb(254 243 199 / 0.3); border-left: 3px solid #f59e0b;
    padding: 0.55rem 0.75rem; border-radius: 0.35rem;
    font-size: 0.8rem; color: rgb(75 85 99); margin-top: 0.5rem;
}
.dark .citio-notas-box { background: rgba(245, 158, 11, 0.08); color: rgb(209 213 219); }

.citio-link {
    display: inline-flex; align-items: center; gap: 0.2rem;
    color: #0ea5e9; font-weight: 600; text-decoration: none;
    font-size: 0.78rem;
}
.citio-link:hover { text-decoration: underline; }

/* === TIMELINE HISTORIAL === */
.citio-timeline {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 0.5rem 1rem;
    align-items: start;
}
.citio-timeline .tl-date {
    font-size: 0.72rem;
    color: rgb(100 116 139);
    font-variant-numeric: tabular-nums;
    padding-top: 0.4rem;
    text-align: right;
    border-right: 2px solid rgb(226 232 240);
    padding-right: 0.7rem;
    white-space: nowrap;
}
.dark .citio-timeline .tl-date { color: rgb(120, 120, 130); border-right-color: rgba(255, 255, 255, 0.06); }
.citio-timeline .tl-date strong {
    display: block;
    font-weight: 700;
    color: rgb(15 23 42);
    font-size: 0.78rem;
}
.dark .citio-timeline .tl-date strong { color: rgb(229, 231, 235); }
.citio-timeline .tl-event {
    padding: 0.4rem 0.6rem;
    background: rgb(248 250 252);
    border-left: 3px solid var(--ev-color, #6b7280);
    border-radius: 0.5rem;
    margin-bottom: 0.45rem;
}
.dark .citio-timeline .tl-event { background: rgba(255, 255, 255, 0.02); }
.citio-timeline .tl-head {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
    font-size: 0.78rem; margin-bottom: 0.2rem;
}
.citio-timeline .tl-badge {
    padding: 0.1rem 0.5rem;
    background: var(--ev-color)20;
    color: var(--ev-color);
    border-radius: 0.3rem;
    font-weight: 600;
    font-size: 0.7rem;
}
.citio-timeline .tl-user { color: rgb(100 116 139); font-size: 0.72rem; }
.dark .citio-timeline .tl-user { color: rgb(156, 163, 175); }
.citio-timeline .tl-comment {
    color: rgb(51 65 85);
    font-size: 0.78rem;
    margin-top: 0.15rem;
    line-height: 1.35;
    white-space: pre-wrap;
}
.dark .citio-timeline .tl-comment { color: rgb(209, 213, 219); }
.citio-comment-form {
    margin-top: 1rem;
    padding: 0.7rem 0.9rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 0.65rem;
}
.dark .citio-comment-form {
    background: rgba(245, 158, 11, 0.04);
    border-color: rgba(245, 158, 11, 0.18);
}
.citio-comment-form textarea {
    width: 100%;
    resize: vertical;
    min-height: 60px;
    background: #fff;
    border: 1px solid rgb(226 232 240);
    border-radius: 0.5rem;
    padding: 0.5rem 0.6rem;
    color: rgb(15 23 42);
    font-size: 0.82rem;
}
.dark .citio-comment-form textarea {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.08);
    color: inherit;
}
.citio-comment-form textarea:focus {
    outline: none;
    border-color: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.15);
}
.citio-comment-form .actions {
    margin-top: 0.5rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
}
.citio-comment-form button {
    background: #f59e0b;
    color: white;
    border: none;
    padding: 0.4rem 0.85rem;
    border-radius: 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}
.citio-comment-form button:hover { background: #d97706; }
.citio-comment-form button:disabled { opacity: 0.5; cursor: not-allowed; }

.citio-firma-box {
    background: white; border: 1px solid rgba(0,0,0,0.1);
    border-radius: 0.4rem; padding: 0.4rem;
    text-align: center; margin-bottom: 0.4rem;
}
.citio-firma-box img { max-height: 70px; max-width: 100%; }

[x-cloak] { display: none !important; }

/* ============================================================
   Citio Tab Guard — Estilos para marcar tabs no visitados
   ============================================================ */
.citio-tab-unvisited {
    position: relative;
}
.citio-tab-unvisited::after {
    content: '';
    position: absolute;
    top: 0.4rem;
    right: 0.35rem;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25);
    animation: citio-pulse-amber 1.6s ease-in-out infinite;
}
@keyframes citio-pulse-amber {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.35); opacity: 0.75; }
}

.citio-tab-visited {
    position: relative;
}

.citio-tab-shake {
    animation: citio-tab-shake 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97) both !important;
    background: rgba(239, 68, 68, 0.1) !important;
    color: #dc2626 !important;
    border-color: #dc2626 !important;
}
@keyframes citio-tab-shake {
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(3px); }
    30%, 50%, 70% { transform: translateX(-5px); }
    40%, 60% { transform: translateX(5px); }
}

@keyframes citio-toast-in {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes citio-toast-out {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(10px) scale(0.97); }
}

.citio-tab-guard-counter {
    /* Estilos inline puestos por el JS; esto es solo un fallback */
}

/* ============================================================
   Citio — Barra de totales estilo "detail view"
   Sin chrome de input — los valores se ven como texto plano
   Los inputs se revelan solo al enfocar
   ============================================================ */

.citio-bar-totales {
    background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 50%, #0f0f0f 100%) !important;
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem 0.9rem !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.06);
}
.citio-bar-totales .fi-section-content,
.citio-bar-totales .fi-section-content-ctn,
.citio-bar-totales .fi-schema {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Labels como badges */
.citio-bar-totales .fi-fo-field-wrp-label,
.citio-bar-totales label {
    font-size: 0.6rem !important;
    color: #9ca3af !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600 !important;
    margin-bottom: 0.2rem !important;
    line-height: 1 !important;
}

/* Inputs sin chrome — se ven como texto */
.citio-bar-totales .fi-input-wrp {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    ring: 0 !important;
    padding: 0 !important;
    min-height: auto !important;
    transition: background 150ms ease, box-shadow 150ms ease;
}
.citio-bar-totales input {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: auto !important;
    min-height: auto !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #e5e7eb !important;
    outline: none !important;
}
/* Prefix $ y suffix % como texto inline suave */
.citio-bar-totales .fi-input-wrp-prefix,
.citio-bar-totales .fi-input-wrp-suffix {
    font-size: 0.85rem !important;
    color: #9ca3af !important;
    padding: 0 0.1rem !important;
    background: transparent !important;
    border: none !important;
}

/* Al enfocar un input editable — subtle highlight */
.citio-bar-totales .fi-input-wrp:focus-within {
    background: rgba(245, 158, 11, 0.1) !important;
    border-radius: 0.3rem !important;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.3) !important;
}

/* Toggle IVA más compacto */
.citio-bar-totales .fi-toggle {
    height: 1.1rem !important;
    width: 2.1rem !important;
    margin-top: 0.15rem;
}
.citio-bar-totales .fi-toggle-thumb {
    height: 0.85rem !important;
    width: 0.85rem !important;
}

/* ============================================================
   Citio — Tabla de items + Totales card (PresupuestoForm)
   Estilo detail view (OS-XXXXX)
   ============================================================ */

/* Tabla HTML de items */
.citio-items-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: rgba(17, 24, 39, 0.4);
    border: 1px solid rgba(229, 231, 235, 0.12);
    border-radius: 0.55rem;
    overflow: hidden;
}
.citio-items-table thead th {
    padding: 0.55rem 0.75rem;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9ca3af;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(229, 231, 235, 0.12);
    text-align: left;
}
.citio-items-table tbody td {
    padding: 0.6rem 0.75rem;
    font-size: 0.85rem;
    color: #e5e7eb;
    border-bottom: 1px solid rgba(229, 231, 235, 0.06);
    vertical-align: middle;
}
.citio-items-table tbody tr:last-child td {
    border-bottom: none;
}
.citio-items-table tbody tr.citio-tr:hover {
    background: rgba(255, 255, 255, 0.02);
}

.citio-items-table .citio-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}
.citio-items-table .citio-um {
    text-align: center;
    color: #9ca3af;
    font-size: 0.78rem;
}
.citio-items-table .citio-desc {
    color: #e5e7eb;
    line-height: 1.3;
}
.citio-items-table .citio-importe {
    font-weight: 700;
    color: #f59e0b;
}
.citio-items-table .citio-actions {
    text-align: right;
}

/* Badge de clave ámbar */
.citio-clave-badge {
    display: inline-block;
    font-family: ui-monospace, monospace;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    background: rgba(245, 158, 11, 0.14);
    color: #f59e0b;
    border-radius: 0.3rem;
    white-space: nowrap;
}

/* Botón eliminar */
.citio-btn-del {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #9ca3af;
    padding: 0.35rem;
    border-radius: 0.3rem;
    transition: all 150ms ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.citio-btn-del:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

/* Empty state */
.citio-items-empty {
    padding: 2rem 1rem !important;
    text-align: center !important;
    color: #6b7280 !important;
    font-size: 0.85rem !important;
    font-style: italic;
}

/* ══ Wrapper Section — resumen presupuesto (claro por defecto, oscuro con .dark) ══ */
.citio-totales-wrapper.citio-totales-wrapper {
    background: #ffffff !important;
    border: 1px solid rgba(245, 158, 11, 0.55) !important;
    border-radius: 0.55rem !important;
    padding: 0.9rem 1rem !important;
    color: rgb(17 24 39) !important;
    position: sticky;
    top: 1rem;
    box-shadow: 0 2px 10px rgba(245, 158, 11, 0.12);
}
.citio-totales-wrapper.citio-totales-wrapper .citio-totales-header {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    color: rgb(55 65 81) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.citio-totales-wrapper.citio-totales-wrapper .fi-section-content-ctn,
.citio-totales-wrapper.citio-totales-wrapper .fi-section-content,
.citio-totales-wrapper.citio-totales-wrapper .fi-schema {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    gap: 0 !important;
}

/* ══ INLINE fields dentro del totales card ══
   Usamos flex con margin-left auto para empujar el contenido a la derecha */
.citio-totales-wrapper.citio-totales-wrapper .citio-card-inline.fi-fo-field-has-inline-label,
.citio-totales-wrapper.citio-totales-wrapper .citio-card-inline {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    padding: 0.55rem 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

/* Label column (izquierda, tamaño natural) */
.citio-totales-wrapper.citio-totales-wrapper .citio-card-inline .fi-fo-field-label-col {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
}

/* Content column (derecha, empujado al borde) */
.citio-totales-wrapper.citio-totales-wrapper .citio-card-inline .fi-fo-field-content-col {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
}
.citio-totales-wrapper.citio-totales-wrapper .citio-card-inline .fi-fo-field-label,
.citio-totales-wrapper.citio-totales-wrapper .citio-card-inline .fi-fo-field-label-content {
    font-size: 0.85rem !important;
    color: rgb(55 65 81) !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    margin: 0 !important;
}

/* Content column: alineado a la derecha */
.citio-totales-wrapper.citio-totales-wrapper .citio-card-inline .fi-fo-field-content-col {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

/* Input de Descuento — disimulado, solo muestra el número como texto */
.citio-totales-wrapper.citio-totales-wrapper .citio-card-inline .fi-input-wrp {
    background: transparent !important;
    border: none !important;
    border-radius: 0.3rem !important;
    box-shadow: none !important;
    height: 1.5rem !important;
    min-height: 1.5rem !important;
    width: auto !important;
    max-width: 5rem !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    transition: background 150ms ease, box-shadow 150ms ease !important;
    cursor: text;
}
.citio-totales-wrapper.citio-totales-wrapper .citio-card-inline input[type="number"],
.citio-totales-wrapper.citio-totales-wrapper .citio-card-inline .fi-input {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: rgb(17 24 39) !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    padding: 0 0.25rem !important;
    height: 1.4rem !important;
    min-height: 1.4rem !important;
    text-align: right !important;
    width: 2.5rem !important;
    max-width: 2.5rem !important;
    flex: 0 0 auto !important;
}
/* Hover — indicio sutil de editable */
.citio-totales-wrapper.citio-totales-wrapper .citio-card-inline .fi-input-wrp:hover {
    background: rgba(0, 0, 0, 0.04) !important;
}
/* Focus — ring ámbar */
.citio-totales-wrapper.citio-totales-wrapper .citio-card-inline .fi-input-wrp:focus-within {
    background: rgba(245, 158, 11, 0.08) !important;
    box-shadow: 0 0 0 1.5px rgba(245, 158, 11, 0.4) !important;
}
.citio-totales-wrapper.citio-totales-wrapper .citio-card-inline .fi-input-wrp-suffix,
.citio-totales-wrapper.citio-totales-wrapper .citio-card-inline .fi-input-wrp-prefix {
    font-size: 0.8rem !important;
    color: rgb(31 41 55) !important;
    font-weight: 600 !important;
    padding: 0 0.35rem 0 0.1rem !important;
    background: transparent !important;
    border: none !important;
    line-height: 1 !important;
    flex: 0 0 auto !important;
}

/* Flete manual — más ancho que descuento % para montos cómodos */
.citio-totales-wrapper.citio-totales-wrapper .citio-flete-inline .fi-input-wrp {
    height: 2.1rem !important;
    min-height: 2.1rem !important;
    min-width: 9.5rem !important;
    max-width: 12rem !important;
    padding: 0 0.35rem !important;
}
.citio-totales-wrapper.citio-totales-wrapper .citio-flete-inline input[type="number"],
.citio-totales-wrapper.citio-totales-wrapper .citio-flete-inline .fi-input {
    font-size: 1rem !important;
    font-weight: 700 !important;
    height: 2rem !important;
    min-height: 2rem !important;
    width: 7.5rem !important;
    min-width: 7.5rem !important;
    max-width: 9rem !important;
    padding: 0 0.35rem !important;
}
.citio-totales-wrapper.citio-totales-wrapper .citio-flete-inline .fi-input-wrp-prefix {
    font-size: 0.95rem !important;
    padding-right: 0.15rem !important;
}

/* Descuento % — más grande para capturarlo cómodo (más angosto que flete: solo 0-100) */
.citio-totales-wrapper.citio-totales-wrapper .citio-descuento-inline .fi-input-wrp {
    height: 2.1rem !important;
    min-height: 2.1rem !important;
    min-width: 6rem !important;
    max-width: 8rem !important;
    padding: 0 0.35rem !important;
}
.citio-totales-wrapper.citio-totales-wrapper .citio-descuento-inline input[type="number"],
.citio-totales-wrapper.citio-totales-wrapper .citio-descuento-inline .fi-input {
    font-size: 1rem !important;
    font-weight: 700 !important;
    height: 2rem !important;
    min-height: 2rem !important;
    width: 4rem !important;
    min-width: 4rem !important;
    max-width: 5rem !important;
    padding: 0 0.35rem !important;
}
.citio-totales-wrapper.citio-totales-wrapper .citio-descuento-inline .fi-input-wrp-suffix {
    font-size: 0.95rem !important;
    padding-left: 0.1rem !important;
}

/* ToggleButtons Sí/No MUY sutiles — se ven como texto */
.citio-totales-wrapper.citio-totales-wrapper .citio-card-inline .fi-fo-toggle-buttons {
    display: inline-flex !important;
    gap: 0.15rem !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}
/* Contenedor individual de cada botón */
.citio-totales-wrapper.citio-totales-wrapper .citio-card-inline .fi-fo-toggle-buttons-btn-ctn,
.citio-totales-wrapper.citio-totales-wrapper .citio-card-inline .fi-fo-toggle-buttons > * {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}
/* Cada botón — texto plano sin chrome */
.citio-totales-wrapper.citio-totales-wrapper .citio-card-inline .fi-fo-toggle-buttons .fi-btn,
.citio-totales-wrapper.citio-totales-wrapper .citio-card-inline .fi-fo-toggle-buttons label,
.citio-totales-wrapper.citio-totales-wrapper .citio-card-inline .fi-fo-toggle-buttons button {
    padding: 0.1rem 0.45rem !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    min-height: auto !important;
    height: auto !important;
    line-height: 1.3 !important;
    border-radius: 0.25rem !important;
    border: none !important;
    background: transparent !important;
    color: rgb(75 85 99) !important;
    transition: all 150ms ease !important;
    cursor: pointer;
    box-shadow: none !important;
}
/* Ocultar radios */
.citio-totales-wrapper.citio-totales-wrapper .citio-card-inline .fi-fo-toggle-buttons input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
}
/* Opción seleccionada — solo un cambio de color sutil, sin fondo grueso */
.citio-totales-wrapper.citio-totales-wrapper .citio-card-inline .fi-fo-toggle-buttons input:checked + label,
.citio-totales-wrapper.citio-totales-wrapper .citio-card-inline .fi-fo-toggle-buttons input:checked + button,
.citio-totales-wrapper.citio-totales-wrapper .citio-card-inline .fi-fo-toggle-buttons input:checked ~ label,
.citio-totales-wrapper.citio-totales-wrapper .citio-card-inline .fi-fo-toggle-buttons .fi-btn-active,
.citio-totales-wrapper.citio-totales-wrapper .citio-card-inline .fi-fo-toggle-buttons [aria-pressed="true"],
.citio-totales-wrapper.citio-totales-wrapper .citio-card-inline .fi-fo-toggle-buttons [data-state="checked"] {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #b45309 !important;
    font-weight: 700 !important;
}
/* Hover */
.citio-totales-wrapper.citio-totales-wrapper .citio-card-inline .fi-fo-toggle-buttons label:hover,
.citio-totales-wrapper.citio-totales-wrapper .citio-card-inline .fi-fo-toggle-buttons button:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    color: rgb(17 24 39) !important;
}
/* Ocultar iconos si los hubiera */
.citio-totales-wrapper.citio-totales-wrapper .citio-card-inline .fi-fo-toggle-buttons svg {
    display: none !important;
}

/* Rows de totales dentro del wrapper — mismo espaciado que los inline inputs */
.citio-totales-wrapper.citio-totales-wrapper .citio-totales-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.55rem 0;
    font-size: 0.85rem;
    color: rgb(55 65 81);
    font-variant-numeric: tabular-nums;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.citio-totales-wrapper.citio-totales-wrapper .citio-totales-row span:first-child {
    font-weight: 600;
    color: rgb(75 85 99);
}
.citio-totales-wrapper.citio-totales-wrapper .citio-totales-row span:last-child {
    font-weight: 700;
    color: rgb(17 24 39);
}
.citio-totales-wrapper.citio-totales-wrapper .citio-totales-row:last-child {
    border-bottom: none;
}
.citio-totales-wrapper.citio-totales-wrapper .citio-card-inline {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}
.citio-totales-wrapper.citio-totales-wrapper .citio-totales-row.total {
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    border-bottom: none;
    margin-top: 0.5rem;
    padding-top: 0.85rem;
    padding-bottom: 0;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #92400e;
    letter-spacing: 0.04em;
}
.citio-totales-wrapper.citio-totales-wrapper .citio-totales-row.total span:first-child {
    color: #92400e;
}
.citio-totales-wrapper.citio-totales-wrapper .citio-totales-row.total .valor {
    font-size: 1.35rem;
    font-weight: 800;
    color: #c2410c;
    font-variant-numeric: tabular-nums;
    text-transform: none;
    letter-spacing: normal;
}
/* Texto de ayuda (tope descuento) */
.citio-totales-wrapper.citio-totales-wrapper .fi-fo-field-wrp-hint,
.citio-totales-wrapper.citio-totales-wrapper .fi-fo-hint,
.citio-totales-wrapper.citio-totales-wrapper [class*="hint"] {
    color: rgb(75 85 99) !important;
    font-size: 0.72rem !important;
}

/* Modo oscuro — resumen presupuesto */
.dark .citio-totales-wrapper.citio-totales-wrapper {
    background: linear-gradient(135deg, #0a0a0a, #1a1a1a) !important;
    border-color: rgba(245, 158, 11, 0.5) !important;
    color: white !important;
    box-shadow: 0 2px 10px rgba(245, 158, 11, 0.06);
}
.dark .citio-totales-wrapper.citio-totales-wrapper .citio-totales-header {
    color: #9ca3af !important;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
.dark .citio-totales-wrapper.citio-totales-wrapper .citio-card-inline .fi-fo-field-label,
.dark .citio-totales-wrapper.citio-totales-wrapper .citio-card-inline .fi-fo-field-label-content {
    color: rgb(209 213 219) !important;
    font-weight: 400 !important;
}
.dark .citio-totales-wrapper.citio-totales-wrapper .citio-card-inline input[type="number"],
.dark .citio-totales-wrapper.citio-totales-wrapper .citio-card-inline .fi-input {
    color: #e5e7eb !important;
    font-weight: 600 !important;
}
.dark .citio-totales-wrapper.citio-totales-wrapper .citio-card-inline .fi-input-wrp:hover {
    background: rgba(255, 255, 255, 0.04) !important;
}
.dark .citio-totales-wrapper.citio-totales-wrapper .citio-card-inline .fi-input-wrp-prefix,
.dark .citio-totales-wrapper.citio-totales-wrapper .citio-card-inline .fi-input-wrp-suffix {
    color: #9ca3af !important;
    font-weight: 400 !important;
}
.dark .citio-totales-wrapper.citio-totales-wrapper .citio-card-inline .fi-fo-toggle-buttons .fi-btn,
.dark .citio-totales-wrapper.citio-totales-wrapper .citio-card-inline .fi-fo-toggle-buttons label,
.dark .citio-totales-wrapper.citio-totales-wrapper .citio-card-inline .fi-fo-toggle-buttons button {
    color: #6b7280 !important;
    font-weight: 500 !important;
}
.dark .citio-totales-wrapper.citio-totales-wrapper .citio-card-inline .fi-fo-toggle-buttons input:checked + label,
.dark .citio-totales-wrapper.citio-totales-wrapper .citio-card-inline .fi-fo-toggle-buttons input:checked + button,
.dark .citio-totales-wrapper.citio-totales-wrapper .citio-card-inline .fi-fo-toggle-buttons input:checked ~ label,
.dark .citio-totales-wrapper.citio-totales-wrapper .citio-card-inline .fi-fo-toggle-buttons .fi-btn-active,
.dark .citio-totales-wrapper.citio-totales-wrapper .citio-card-inline .fi-fo-toggle-buttons [aria-pressed="true"],
.dark .citio-totales-wrapper.citio-totales-wrapper .citio-card-inline .fi-fo-toggle-buttons [data-state="checked"] {
    background: rgba(245, 158, 11, 0.12) !important;
    color: #f59e0b !important;
}
.dark .citio-totales-wrapper.citio-totales-wrapper .citio-card-inline .fi-fo-toggle-buttons label:hover,
.dark .citio-totales-wrapper.citio-totales-wrapper .citio-card-inline .fi-fo-toggle-buttons button:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #e5e7eb !important;
}
.dark .citio-totales-wrapper.citio-totales-wrapper .citio-totales-row {
    color: #d1d5db;
    border-bottom-color: rgba(255, 255, 255, 0.04);
}
.dark .citio-totales-wrapper.citio-totales-wrapper .citio-totales-row span:first-child {
    color: #d1d5db;
    font-weight: 400;
}
.dark .citio-totales-wrapper.citio-totales-wrapper .citio-totales-row span:last-child {
    color: #e5e7eb;
}
.dark .citio-totales-wrapper.citio-totales-wrapper .citio-card-inline {
    border-bottom-color: rgba(255, 255, 255, 0.04) !important;
}
.dark .citio-totales-wrapper.citio-totales-wrapper .citio-totales-row.total {
    border-top-color: rgba(255, 255, 255, 0.15);
    color: #f59e0b;
}
.dark .citio-totales-wrapper.citio-totales-wrapper .citio-totales-row.total span:first-child {
    color: #f59e0b;
}
.dark .citio-totales-wrapper.citio-totales-wrapper .citio-totales-row.total .valor {
    color: #f59e0b;
}
.dark .citio-totales-wrapper.citio-totales-wrapper .fi-fo-field-wrp-hint,
.dark .citio-totales-wrapper.citio-totales-wrapper .fi-fo-hint,
.dark .citio-totales-wrapper.citio-totales-wrapper [class*="hint"] {
    color: rgb(156 163 175) !important;
}

/* ══ TOTALES CARD derecha (legado, mantener) ══ */
.citio-form-totales-card {
    background: linear-gradient(135deg, #0a0a0a, #1a1a1a);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 0.55rem;
    padding: 0.9rem 1rem;
    color: white;
    position: sticky;
    top: 1rem;
}
.citio-form-totales-card .citio-card-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.citio-form-totales-card .citio-card-row {
    display: flex;
    justify-content: space-between;
    padding: 0.35rem 0;
    font-size: 0.85rem;
    color: #d1d5db;
    font-variant-numeric: tabular-nums;
}
.citio-form-totales-card .citio-card-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 0.65rem;
    padding-top: 0.7rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #f59e0b;
}
.citio-form-totales-card .citio-card-total .amber {
    font-size: 1.35rem;
    font-weight: 800;
    color: #f59e0b;
    font-variant-numeric: tabular-nums;
}

/* Botón bloqueado hasta que todos los tabs sean visitados */
.citio-submit-locked {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    filter: grayscale(0.5);
    transition: opacity 200ms ease, filter 200ms ease !important;
}
.citio-submit-locked:hover {
    opacity: 0.55 !important;
    transform: none !important;
}

/* ─── ToggleButtons IVA: solo el activo coloreado, el inactivo neutral ─── */
.citio-totales-wrapper .fi-fo-toggle-buttons-options .fi-fo-toggle-buttons-option:not(:has([aria-selected="true"])) {
    background: transparent !important;
    color: rgb(55 65 81) !important;
    border-color: rgb(209 213 219) !important;
}
.citio-totales-wrapper .fi-fo-toggle-buttons-options .fi-fo-toggle-buttons-option:not(:has([aria-selected="true"])):hover {
    background: rgba(0, 0, 0, 0.05) !important;
    color: rgb(17 24 39) !important;
}
.dark .citio-totales-wrapper .fi-fo-toggle-buttons-options .fi-fo-toggle-buttons-option:not(:has([aria-selected="true"])) {
    background: transparent !important;
    color: rgb(120, 120, 130) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
.dark .citio-totales-wrapper .fi-fo-toggle-buttons-options .fi-fo-toggle-buttons-option:not(:has([aria-selected="true"])):hover {
    background: rgba(255, 255, 255, 0.04) !important;
    color: rgb(160, 160, 170) !important;
}

/* ─── Mapa "Citio Dark": tile layer con tinte ámbar Citio ───
   Aplica un filtro CSS sobre los tiles del mapa Mapbox dark-v11 para darles
   un tono cálido ámbar que combina con la identidad de Citio. El filtro solo
   aplica a tiles con className 'citio-tile-dark' (la capa default), no afecta
   los marcadores, controles, ni los pines del mapa. */
.citio-tile-dark {
    filter: hue-rotate(-25deg) sepia(0.35) saturate(1.4) brightness(1.05);
    -webkit-filter: hue-rotate(-25deg) sepia(0.35) saturate(1.4) brightness(1.05);
}

/* ─── Inventario: tooltips flotantes en hover de celdas (CSS puro, sin Alpine) ─── */
/* Forzar overflow:visible en TODOS los ancestros donde Filament por default
   pone overflow:hidden — esto evita que el tooltip absoluto se corte. */
.fi-ta-text:has(.citio-inv-cell),
.fi-ta-cell:has(.citio-inv-cell),
.fi-ta-row:has(.citio-inv-cell:hover) {
    overflow: visible !important;
}
/* Cuando hover, el row sube el z-index para que el tooltip cubra todo lo demás */
.fi-ta-row:has(.citio-inv-cell:hover) {
    z-index: 999;
    position: relative;
}
.citio-inv-cell {
    position: relative;
    display: inline-block;
    cursor: help;
}
.citio-inv-cell-text {
    display: inline;
}
.citio-inv-tooltip {
    /* Oculto por default — sin Alpine, solo CSS */
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #111827;
    color: #f9fafb;
    padding: 0.6rem 0.8rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(245, 158, 11, 0.35);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
    font-size: 0.72rem;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
    min-width: 200px;
    text-align: left;
    font-weight: 400 !important;
    line-height: 1.4;
}
.citio-inv-cell:hover .citio-inv-tooltip {
    display: block;
}
.citio-inv-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #111827;
}
/* Tooltip alineado a la derecha (para columnas numéricas que están al final) */
.citio-inv-tooltip-right {
    left: auto;
    right: 0;
    transform: none;
}
.citio-inv-tooltip-right::after {
    left: auto;
    right: 1rem;
    transform: none;
}

/* Filas superiores: el tooltip baja en lugar de subir, para que el titulo
   no se recorte detras del encabezado de la tabla. */
.fi-ta-row:nth-child(-n+4) .citio-inv-tooltip {
    top: calc(100% + 8px);
    bottom: auto;
}
.fi-ta-row:nth-child(-n+4) .citio-inv-tooltip::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #111827;
}
.citio-inv-tt-title {
    display: block;
    font-weight: 700;
    color: #fbbf24;
    margin-bottom: 0.4rem;
    font-size: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 0.3rem;
}
.citio-inv-tt-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.18rem 0;
    font-variant-numeric: tabular-nums;
}
.citio-inv-tt-lbl {
    color: rgb(156 163 175);
    flex: 1;
    text-align: left;
}
.citio-inv-tt-val {
    font-weight: 700;
    margin-left: auto;
    text-align: right;
    color: #f9fafb;
}
.citio-inv-tt-total {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 0.25rem;
    padding-top: 0.35rem;
}

/* ─── ToggleButtons IVA en form de presupuesto: input + label structure ───
   El label NO seleccionado pierde el background de color y se ve outlined gray.
   Cuando el radio está :checked, el label adyacente conserva todos sus colores. */
.citio-iva-toggle .fi-fo-toggle-buttons input[type="radio"]:not(:checked) + label.fi-btn {
    background: transparent !important;
    background-image: none !important;
    color: rgb(55 65 81) !important;
    border: 1px solid rgb(209 213 219) !important;
    font-weight: 600 !important;
}
.dark .citio-iva-toggle .fi-fo-toggle-buttons input[type="radio"]:not(:checked) + label.fi-btn {
    color: rgb(156, 163, 175) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}
.citio-iva-toggle .fi-fo-toggle-buttons input[type="radio"]:not(:checked) + label.fi-btn:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    color: rgb(17 24 39) !important;
    border-color: rgb(156 163 175) !important;
}
.dark .citio-iva-toggle .fi-fo-toggle-buttons input[type="radio"]:not(:checked) + label.fi-btn:hover {
    background: rgba(255, 255, 255, 0.04) !important;
}

/* ── Header de página: acciones responsivas ──
   Por defecto Filament pone .fi-header-actions-ctn como flex con flex-shrink:0 y
   sin wrap, así que cuando hay muchos botones (p. ej. la vista de una OS:
   PDF, Subcontrato, Reagendar, Cancelar, Finalizar…) se desbordan y se cortan.
   Permitimos que el contenedor encoja y que los botones envuelvan a varias
   líneas, alineados a la derecha. Aplica en tema claro y oscuro. */
.fi-header-actions-ctn {
    flex-wrap: wrap;
    flex-shrink: 1;
    min-width: 0;
}
.fi-header-actions-ctn > .fi-ac {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 0.5rem;
}

/* ===== Repeater en modo tabla (Subcontratos / Renovación) =====
   Mismo acabado que .citio-table (la tabla de conceptos de Crear Registros):
   encabezado uppercase chico, bordes de fila suaves, esquinas redondeadas y
   hover. Solo cambia el chrome de la tabla; los campos siguen siendo campos. */
.fi-fo-table-repeater table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    border-radius: 0.55rem;
    overflow: hidden;
    border: 1px solid rgb(209 213 219);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.dark .fi-fo-table-repeater table {
    background: rgba(17, 24, 39, 0.6);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}
.fi-fo-table-repeater table thead th {
    background: rgb(249 250 251) !important;
    padding: 0.5rem 0.65rem !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: rgb(55 65 81) !important;
    text-align: left;
    border-bottom: 1px solid rgb(209 213 219);
}
.dark .fi-fo-table-repeater table thead th {
    background: rgba(255, 255, 255, 0.03) !important;
    color: rgb(156 163 175) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
/* El asterisco de requerido, en el mismo ámbar de la marca */
.fi-fo-table-repeater .fi-fo-table-repeater-header-required-mark {
    color: #f59e0b;
}
.fi-fo-table-repeater table tbody td {
    padding: 0.4rem 0.5rem !important;
    border-bottom: 1px solid rgb(203 213 225);
    vertical-align: middle;
}
.dark .fi-fo-table-repeater table tbody td {
    border-bottom-color: rgba(255, 255, 255, 0.05);
}
.fi-fo-table-repeater table tbody tr:last-child td { border-bottom: none; }
.fi-fo-table-repeater table tbody tr:hover td { background: rgb(249 250 251); }
.dark .fi-fo-table-repeater table tbody tr:hover td { background: rgba(255, 255, 255, 0.02); }