/* Toscana Projects: tokens y componentes tp-. Cargar DESPUES de Bootstrap.
   Requiere Montserrat: https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap */
:root, [data-theme="light"] {
  --brand-petroleo: #1a343d;
  --brand-acero: #5f7c8f;
  --brand-niebla: #c2c3c9;
  --page: #f5f7f8;
  --surface: #ffffff;
  --surface-muted: #eef2f4;
  --surface-selected: #e3eaef;
  --ink: #1a343d;
  --ink-muted: #56666d;
  --ink-placeholder: #647780;
  --ink-inverse: #ffffff;
  --border: #dde2e6;
  --border-field: #7e8f98;
  --primary: #4d6a7d;
  --primary-hover: #3e5868;
  --focus: #5f7c8f;
  --nav-bg: #1a343d;
  --nav-ink: #ffffff;
  --nav-ink-muted: #c2c3c9;
  --success: #2a7352;
  --success-bg: #e6f2ec;
  --warning: #8a560a;
  --warning-bg: #fbf1dc;
  --warning-fill: #d9982b;
  --danger: #b3403a;
  --danger-bg: #f8e6e4;
  --shadow-sm: 0 1px 2px rgba(26, 52, 61, 0.08);
  --shadow-md: 0 8px 24px rgba(26, 52, 61, 0.14);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;
  --control-h: 36px;
  --control-h-sm: 32px;
  --avatar: 36px;
  --font-sans: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
}
[data-theme="dark"] {
  --brand-petroleo: #1a343d;
  --brand-acero: #5f7c8f;
  --brand-niebla: #c2c3c9;
  --page: #0e1b20;
  --surface: #142830;
  --surface-muted: #1b323b;
  --surface-selected: #243f49;
  --ink: #e8edef;
  --ink-muted: #9fb0b8;
  --ink-placeholder: #7d8f97;
  --ink-inverse: #0e1b20;
  --border: #243c45;
  --border-field: #62808c;
  --primary: #8fb0c4;
  --primary-hover: #a8c3d3;
  --focus: #8fb0c4;
  --nav-bg: #0b171b;
  --nav-ink: #e8edef;
  --nav-ink-muted: #9fb0b8;
  --success: #6cc49b;
  --success-bg: #173a2c;
  --warning: #e8b45a;
  --warning-bg: #3a2c12;
  --warning-fill: #e8b45a;
  --danger: #ee8a82;
  --danger-bg: #3f1d1b;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

.tp-root, .tp-root * { box-sizing: border-box; }
.tp-root { font-family: var(--font-sans); color: var(--ink); font-size: 14px; line-height: 22px; }
.tp-num { font-variant-numeric: tabular-nums; }

.tp-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--control-h); padding: 0 var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--border-field); background: var(--surface); color: var(--ink); font: 500 14px/1 var(--font-sans); cursor: pointer; white-space: nowrap; transition: background-color .15s, border-color .15s, color .15s; }
.tp-btn:hover { background: var(--surface-muted); }
.tp-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tp-btn--primary { background: var(--primary); border-color: var(--primary); color: var(--ink-inverse); }
.tp-btn--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.tp-btn--ghost { background: transparent; border-color: transparent; color: var(--primary); }
.tp-btn--ghost:hover { background: var(--surface-selected); }
.tp-btn--danger { background: var(--surface); border-color: var(--danger); color: var(--danger); }
.tp-btn--danger:hover { background: var(--danger-bg); }
.tp-btn--sm { height: var(--control-h-sm); padding: 0 var(--space-3); font-size: 13px; }
.tp-btn--icon { width: var(--control-h); padding: 0; }
.tp-btn--block { width: 100%; }
.tp-btn[aria-busy="true"] { opacity: .7; cursor: progress; }

.tp-field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.tp-label { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-muted); }
.tp-input { height: var(--control-h); width: 100%; padding: 0 var(--space-3); border: 1px solid var(--border-field); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: 400 14px/1 var(--font-sans); }
.tp-input::placeholder { color: var(--ink-placeholder); }
.tp-input:hover { border-color: var(--primary); }
.tp-input:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--primary); }
.tp-input--sm { height: var(--control-h-sm); font-size: 13px; }
.tp-input--num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.tp-input[readonly] { background: var(--surface-muted); border-color: var(--border); color: var(--ink-muted); }
.tp-input.is-warning { border-color: var(--warning-fill); }
.tp-input.is-error { border-color: var(--danger); }
.tp-affix { position: relative; display: flex; align-items: center; }
.tp-affix > span { position: absolute; left: var(--space-3); color: var(--ink-muted); font-size: 13px; pointer-events: none; }
.tp-affix > .tp-input { padding-left: 26px; }
.tp-help { font-size: 12px; line-height: 16px; color: var(--ink-muted); display: flex; gap: var(--space-1); align-items: center; }
.tp-help.is-warning { color: var(--warning); }
.tp-help.is-error { color: var(--danger); }
.tp-inline { display: inline-flex; align-items: stretch; border: 1px solid var(--border-field); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); }
.tp-inline > label { display: flex; align-items: center; padding: 0 var(--space-3); background: var(--surface-muted); color: var(--ink-muted); font-size: 13px; font-weight: 500; border-right: 1px solid var(--border); }
.tp-inline > input { border: 0; height: calc(var(--control-h) - 2px); width: 80px; padding: 0 var(--space-3); font: 500 14px/1 var(--font-sans); color: var(--ink); background: transparent; font-variant-numeric: tabular-nums; }
.tp-inline > input:focus { outline: 2px solid var(--focus); outline-offset: -2px; }

.tp-tabs { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-muted); border-radius: calc(var(--radius-md) + 3px); }
.tp-tab { display: inline-flex; align-items: center; gap: var(--space-2); height: 32px; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink-muted); font: 500 14px/1 var(--font-sans); cursor: pointer; }
.tp-tab:hover { color: var(--ink); }
.tp-tab[aria-selected="true"] { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); }
.tp-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

.tp-badge { display: inline-flex; align-items: center; gap: var(--space-1); height: 22px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--surface-muted); color: var(--ink-muted); font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; }
.tp-badge--acero { background: var(--surface-selected); color: var(--primary); }
.tp-badge--success { background: var(--success-bg); color: var(--success); }
.tp-badge--warning { background: var(--warning-bg); color: var(--warning); }
.tp-badge--danger { background: var(--danger-bg); color: var(--danger); }
.tp-dot { width: 8px; height: 8px; border-radius: var(--radius-pill); background: currentColor; }

.tp-avatar { width: var(--avatar); height: var(--avatar); flex: none; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; background: var(--surface-selected); color: var(--primary); font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.tp-avatar--petroleo { background: var(--brand-petroleo); color: #ffffff; }
.tp-avatar--muted { background: var(--surface-muted); color: var(--ink-muted); }
.tp-person { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.tp-person__name { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ink); }
.tp-person__meta { margin-top: 2px; }

.tp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); }
.tp-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.tp-stat__label { display: flex; align-items: center; gap: var(--space-2); font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.tp-stat__value { font-size: 24px; line-height: 30px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.tp-stat__meta { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.tp-stat--brand { background: var(--brand-petroleo); border-color: var(--brand-petroleo); }
.tp-stat--brand .tp-stat__label, .tp-stat--brand .tp-stat__meta { color: var(--brand-niebla); }
.tp-stat--brand .tp-stat__value { color: #ffffff; }

.tp-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.tp-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
.tp-table-wrap { overflow-x: auto; }
.tp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tp-table th { text-align: left; padding: 10px var(--space-4); background: var(--surface-muted); color: var(--ink-muted); font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.tp-table td { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); vertical-align: middle; }
.tp-table tbody tr:hover td { background: var(--page); }
.tp-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.tp-table tr.is-incomplete td:first-child { box-shadow: inset 3px 0 0 var(--warning-fill); }
.tp-table tfoot td { background: var(--surface-muted); border-top: 1px solid var(--border-field); font-weight: 600; }
.tp-share { display: flex; flex-direction: column; gap: 6px; min-width: 120px; }
.tp-share__row { display: flex; justify-content: space-between; font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; }
.tp-share__row span:last-child { color: var(--ink-muted); }
.tp-bar { height: 6px; border-radius: var(--radius-sm); background: var(--surface-muted); overflow: hidden; }
.tp-bar > i { display: block; height: 100%; background: var(--primary); border-radius: var(--radius-sm); }

.tp-alert { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-selected); color: var(--ink); border: 1px solid transparent; }
.tp-alert__icon { color: var(--primary); flex: none; margin-top: 1px; }
.tp-alert__title { font-weight: 600; }
.tp-alert__body { font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.tp-alert--success { background: var(--success-bg); }
.tp-alert--success .tp-alert__icon, .tp-alert--success .tp-alert__title { color: var(--success); }
.tp-alert--warning { background: var(--warning-bg); }
.tp-alert--warning .tp-alert__icon, .tp-alert--warning .tp-alert__title { color: var(--warning); }
.tp-alert--danger { background: var(--danger-bg); }
.tp-alert--danger .tp-alert__icon, .tp-alert--danger .tp-alert__title { color: var(--danger); }

.tp-pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
.tp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: 13px; color: var(--ink-muted); }
.tp-crumbs a { color: var(--primary); text-decoration: none; }
.tp-crumbs a:hover { text-decoration: underline; }
.tp-crumbs [aria-current] { color: var(--ink); font-weight: 500; }
.tp-pagehead__title { margin: var(--space-1) 0 0; font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.tp-pagehead__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.tp-select { height: var(--control-h); padding: 0 34px 0 var(--space-3); border: 1px solid var(--border-field); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: 500 14px/1 var(--font-sans); appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%), linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.tp-select:focus { outline: 2px solid var(--focus); outline-offset: 1px; }

/* ---- Patrones reutilizables (extraidos del modal Plantillas de costos) ---- */
/* Encabezado de modal o card con icono + titulo + subtitulo */
.tp-modal__head { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.tp-modal__icon { width: 36px; height: 36px; flex: none; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; background: var(--surface-selected); color: var(--primary); }
.tp-modal__sub { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
/* Pie de acciones alineado a la derecha; --modal lo pega al borde dentro de .modal-body */
.tp-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--space-2); }
.tp-actions--modal { margin: 20px calc(-1 * var(--space-5)) calc(-1 * var(--space-5)); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border); background: var(--surface); }
.tp-actions .spinner-border { margin-left: var(--space-1); }
/* Bloque de campo con separacion inferior */
.tp-section { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-4); }
/* Panel gris para formularios de "agregar" dentro de una vista */
.tp-panel { padding: var(--space-4); margin-bottom: 20px; background: var(--surface-muted); border-radius: var(--radius-lg); }
.tp-panel__title { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); font-size: 13px; font-weight: 600; color: var(--ink); }
.tp-panel__title i { color: var(--primary); }
.tp-panel .tp-input:not([readonly]), .tp-panel .form-control:not([readonly]) { background: var(--surface); }
/* Rejilla de 12 columnas para formularios; en movil todo a ancho completo */
.tp-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-3); align-items: end; }
.tp-span-2 { grid-column: span 2; } .tp-span-3 { grid-column: span 3; } .tp-span-4 { grid-column: span 4; }
.tp-span-6 { grid-column: span 6; } .tp-span-8 { grid-column: span 8; } .tp-span-12 { grid-column: span 12; }
.tp-grid .tp-btn--block { height: var(--control-h); }
/* Lista enmarcada: encabezado con titulo + contador, y tabla dentro */
.tp-list { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.tp-list__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 10px var(--space-4); border-bottom: 1px solid var(--border); }
.tp-list__title { font-size: 14px; font-weight: 600; color: var(--ink); }
.tp-list .tp-table { margin: 0; }
.tp-list .tp-table td { padding: 10px var(--space-4); }
.tp-list .tp-table tbody tr:first-child td { border-top: 0; }
.tp-col-action { width: 48px; }
/* Card propia (para vistas nuevas) */
.tp-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--border); }
.tp-card__title { margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; color: var(--ink); }
.tp-card__body { padding: var(--space-5); }
.tp-card__foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border); }
/* Estado vacio */
.tp-empty { padding: 28px var(--space-4) !important; text-align: center; color: var(--ink-muted); font-size: 13px; }
.tp-empty > i { display: block; margin-bottom: var(--space-2); font-size: 22px; color: var(--brand-niebla); }
.tp-empty__title { font-size: 14px; font-weight: 600; color: var(--ink); }
/* Boton solo icono (acciones por fila) */
.tp-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink-muted); cursor: pointer; }
.tp-icon-btn:hover { background: var(--surface-selected); color: var(--primary); }
.tp-icon-btn--danger:hover { background: var(--danger-bg); color: var(--danger); }
.tp-icon-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
@media (max-width: 767px) {
  .tp-grid > [class*="tp-span-"] { grid-column: span 12; }
  .tp-card__head, .tp-card__body, .tp-card__foot { padding-left: var(--space-4); padding-right: var(--space-4); }
}

@media (prefers-reduced-motion: reduce) { .tp-btn { transition: none; } }