:root {
      --primary: #17212b;
      --secondary: #075fb8;
      --secondary-dark: #064b91;
      --accent: #8fcfff;
      --success: #3d9878;
      --danger: #c95d58;
      --bg: #0b1016;
      --card-bg: #141b23;
      --border: #2a3642;
      --text: #f2f4f6;
      --text-muted: #9caab7;
      --radius: 12px;
      --brand: var(--secondary);
      --brand-strong: var(--secondary-dark);
      --brand-light: #62baff;
      --ink: #17212b;
      --surface-dark: #101821;
      --surface-raised: #192632;
      --border-strong: #354757;
      --text-soft: #d9e2e9;
      --text-label: #c3cfd9;
      --input-text: #f4f6f8;
      --info-text: #c9e6fb;
      --success-light: #83c5a7;
      --success-deep: #317d67;
      --muted-deep: #657483;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Plus Jakarta Sans', sans-serif; }
    body { background-color: var(--bg); color: var(--text); padding-bottom: 60px; }

    header {
      background: var(--surface-dark);
      border-bottom: 2px solid var(--surface-raised);
      padding: 16px 20px;
      position: sticky;
      top: 0;
      z-index: 100;
    }
    .header-content {
      max-width: 1250px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
    }
    .brand-title {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 1.35rem;
      font-weight: 700;
      color: #ffffff;
      letter-spacing: -0.5px;
    }
    .brand-sub {
      font-size: 0.72rem;
      color: var(--brand-light);
      font-weight: 600;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }
    .header-buttons {
      display: flex;
      gap: 10px;
    }
    .btn-hdr {
      background: var(--surface-raised);
      color: var(--text-soft);
      border: 1px solid var(--border-strong);
      padding: 8px 14px;
      border-radius: 6px;
      font-size: 0.82rem;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s;
    }
    .btn-hdr:hover { background: var(--border-strong); color: #fff; }
    .btn-hdr.btn-admin { border-color: var(--brand); color: var(--brand-light); }
    .btn-hdr.btn-requests { border-color: var(--brand); color: var(--text-soft); }

    .main-grid {
      max-width: 1250px;
      margin: 24px auto;
      padding: 0 16px;
      display: grid;
      grid-template-columns: 1fr 420px;
      gap: 20px;
    }
    @media (max-width: 950px) { .main-grid { grid-template-columns: 1fr; } }

    .card {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 20px;
      margin-bottom: 20px;
    }
    .card-title {
      font-size: 1rem;
      font-weight: 700;
      color: #fff;
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid var(--border);
      padding-bottom: 10px;
    }

    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    @media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }

    .profile-selector {
      margin: 0 0 14px;
      padding: 12px;
      border: 1px solid var(--border);
      border-radius: 9px;
      min-width: 0;
    }
    .profile-selector legend {
      padding: 0 6px;
      color: #fff;
      font-size: .93rem;
      font-weight: 700;
    }
    .profile-options {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
    .profile-option {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      min-height: 76px;
      padding: 12px;
      border: 1px solid var(--border-strong);
      border-radius: 8px;
      background: var(--surface-dark);
      cursor: pointer;
      transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
    }
    .profile-option:hover { border-color: var(--brand); }
    .profile-option:has(input:checked) {
      border-color: var(--brand-light);
      background: rgba(7, 95, 184, .18);
      box-shadow: 0 0 0 1px var(--brand);
    }
    .profile-option:focus-within { outline: 3px solid var(--brand-light); outline-offset: 2px; }
    .profile-option input[type="radio"] {
      width: 18px;
      height: 18px;
      padding: 0;
      margin: 2px 0 0;
      flex: 0 0 18px;
      border: 0;
      background: transparent;
      border-radius: 50%;
      accent-color: var(--brand-light);
    }
    .profile-option span { display: grid; gap: 5px; }
    .profile-option strong { color: #fff; font-size: .86rem; }
    .profile-option small { color: var(--text-muted); font-size: .75rem; line-height: 1.45; }
    .profile-help { margin: 9px 2px 0; color: var(--text-muted); font-size: .73rem; }
    button:disabled { opacity: .5; cursor: not-allowed; }
    @media (max-width: 600px) { .profile-options { grid-template-columns: 1fr; } .profile-option { min-height: 0; } }

    .form-group {
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin-bottom: 10px;
    }
    .full-width { grid-column: 1 / -1; }

    label { font-size: 0.78rem; font-weight: 600; color: var(--text-label); }
    input, select, textarea {
      padding: 9px 12px;
      background: var(--surface-dark);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--input-text);
      font-size: 0.85rem;
      outline: none;
    }
    input:focus, select:focus, textarea:focus { border-color: var(--secondary); }

    .btn-add {
      background: var(--secondary);
      color: #fff;
      border: none;
      padding: 9px 16px;
      border-radius: 6px;
      font-weight: 700;
      cursor: pointer;
      font-size: 0.85rem;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .btn-add:hover { background: var(--secondary-dark); }

    .table-custom {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.82rem;
      margin-top: 10px;
    }
    .table-custom th {
      background: var(--surface-dark);
      text-align: left;
      padding: 8px;
      border-bottom: 1px solid var(--border);
      color: var(--text-muted);
    }
    .table-custom td {
      padding: 8px;
      border-bottom: 1px solid var(--surface-raised);
    }

    .btn-del {
      background: transparent;
      border: none;
      color: var(--danger);
      font-weight: 700;
      cursor: pointer;
      font-size: 0.95rem;
    }

    .badge-blind {
      display: inline-block;
      padding: 3px 8px;
      border-radius: 4px;
      background: rgba(2, 132, 199, 0.15);
      border: 1px solid rgba(2, 132, 199, 0.3);
      color: var(--brand-light);
      font-size: 0.75rem;
      font-weight: 700;
    }

    .help-callout {
      background: rgba(2, 132, 199, 0.1);
      border-left: 3px solid var(--brand-light);
      border-radius: 6px;
      padding: 12px 14px;
      font-size: 0.78rem;
      color: var(--info-text);
      line-height: 1.45;
      margin-top: 12px;
    }

    .btn-action-primary {
      width: 100%;
      background: var(--success-deep);
      color: #fff;
      border: none;
      padding: 12px;
      border-radius: 8px;
      font-weight: 800;
      font-size: 0.95rem;
      cursor: pointer;
      margin-top: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    .btn-action-primary:hover { background: var(--success-deep); }

    /* Modales */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.85);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 16px;
      z-index: 9999;
    }
    .modal-box {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 12px;
      width: 100%;
      max-width: 980px;
      max-height: 90vh;
      display: flex;
      flex-direction: column;
      box-shadow: 0 25px 50px rgba(0,0,0,0.7);
    }
    .modal-header {
      padding: 16px 20px;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: var(--surface-dark);
    }
    .modal-body { padding: 20px; overflow-y: auto; }
    .modal-footer {
      padding: 12px 20px;
      border-top: 1px solid var(--border);
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      background: var(--surface-dark);
    }
    .btn-close-x {
      background: transparent;
      border: none;
      color: var(--text-muted);
      font-size: 1.3rem;
      cursor: pointer;
    }

    .btn-wpp {
      background: #25d366;
      color: #fff;
      font-weight: 700;
      border: none;
      padding: 10px;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      margin-top: 8px;
    }
    .btn-mail {
      background: #ea4335;
      color: #fff;
      font-weight: 700;
      border: none;
      padding: 10px;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      margin-top: 8px;
    }

    /* ESTILO PARA PROPUESTA CON NÚMEROS */
    .quote-paper {
      background: #ffffff;
      color: #0f172a;
      border-radius: 8px;
      padding: 24px;
      font-size: 0.85rem;
      line-height: 1.45;
    }
    .quote-header {
      display: flex;
      justify-content: space-between;
      border-bottom: 2px solid #0f172a;
      padding-bottom: 10px;
      margin-bottom: 14px;
    }
    .quote-table {
      width: 100%;
      border-collapse: collapse;
      margin: 12px 0;
    }
    .quote-table th {
      background: #0f172a;
      color: #ffffff;
      padding: 6px 8px;
      text-align: left;
      font-size: 0.78rem;
    }
    .quote-table td {
      padding: 6px 8px;
      border-bottom: 1px solid var(--text-label);
      font-size: 0.8rem;
    }
    .quote-total-box {
      background: #f1f5f9;
      border: 1px solid var(--text-label);
      border-radius: 6px;
      padding: 12px 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 14px;
    }

    @media print {
      body * { visibility: hidden; }
      #printableQuoteArea, #printableQuoteArea * { visibility: visible; }
      #printableQuoteArea {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        background: #fff;
        color: #000;
        padding: 0;
      }
    }

/* IEEC — capa de presentación temporal: cambiar tokens al recibir el logo. */
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  background: radial-gradient(ellipse at 12% -18%, rgba(82,120,148,.14), transparent 38%), var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
header {
  background: rgba(13,17,23,.92);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 8px 28px rgba(0,0,0,.16);
  backdrop-filter: blur(16px);
}
.brand-lockup { display:flex; align-items:center; gap:12px; }
.brand-mark {
  width:46px; height:46px; flex:0 0 46px; display:block; object-fit:cover;
  border:1px solid rgba(98,186,255,.62); border-radius:50%; background:#e2e2e2;
  box-shadow:0 0 0 3px rgba(7,95,184,.14), 0 8px 22px rgba(0,0,0,.28);
}
.brand-title { font-size:1.08rem; letter-spacing:-.35px; }
.brand-sub { color:var(--brand-light); font-size:.68rem; letter-spacing:.65px; }
.header-buttons { flex-wrap:wrap; }
.btn-hdr, .btn-add, .btn-action-primary, .btn-wpp, .btn-mail {
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
.btn-hdr:hover, .btn-add:hover, .btn-action-primary:hover, .btn-wpp:hover, .btn-mail:hover { transform:translateY(-1px); }
.btn-hdr { border-radius:8px; }
.btn-hdr.btn-admin { border-color:rgba(98,186,255,.45); color:var(--brand-light); }
.btn-hdr.btn-requests { border-color:rgba(7,95,184,.55); color:#c8d2db; }
.welcome-strip {
  max-width:1250px; margin:26px auto 0; padding:23px 24px;
  border:1px solid var(--border); border-radius:16px;
  background:linear-gradient(120deg,rgba(18,42,65,.98),rgba(21,27,35,.85));
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  box-shadow:0 16px 36px rgba(0,0,0,.14);
}
.welcome-copy { max-width:730px; }
.eyebrow { display:block; margin-bottom:8px; color:var(--brand-light); text-transform:uppercase; letter-spacing:.12em; font-size:.68rem; font-weight:800; }
.welcome-strip h1 { color:var(--text); font:700 clamp(1.35rem,3vw,2rem)/1.16 'Space Grotesk',sans-serif; letter-spacing:-.045em; }
.welcome-strip p { margin-top:8px; color:var(--text-muted); font-size:.88rem; }
.welcome-status { display:flex; align-items:center; gap:9px; padding:9px 12px; flex-shrink:0; border:1px solid var(--border); border-radius:999px; color:var(--text-soft); background:rgba(13,17,23,.6); font-size:.72rem; font-weight:700; }
.status-dot { width:8px; height:8px; border-radius:50%; background:var(--success-light); box-shadow:0 0 0 4px rgba(61,152,120,.13); }
.main-grid { margin-top:16px; align-items:start; }
.card { border-radius:14px; border-color:var(--border); box-shadow:0 14px 34px rgba(0,0,0,.13); }
.card-title { font-size:.94rem; letter-spacing:-.012em; }
.form-group { gap:6px; }
label { line-height:1.35; }
input, select, textarea { min-height:40px; border-radius:8px; transition:border-color .16s ease, box-shadow .16s ease, background-color .16s ease; }
input:focus, select:focus, textarea:focus { border-color:var(--brand-light); box-shadow:0 0 0 3px rgba(98,186,255,.13); }
.btn-add { border-radius:8px; box-shadow:0 6px 15px rgba(0,0,0,.16); }
.btn-action-primary { border-radius:9px; box-shadow:0 8px 18px rgba(0,0,0,.2); }
.badge-blind { border-radius:999px; }
.table-custom th { font-size:.72rem; text-transform:uppercase; letter-spacing:.055em; }
.table-custom td { vertical-align:middle; }
.help-callout { border-left-color:var(--brand-light); }
.modal-box { border-radius:15px; overflow:hidden; }
.modal-header, .modal-footer { background:var(--surface-dark); }
.modal-body { scrollbar-color:var(--border-strong) transparent; }
.quote-table { width:100%; min-width:0; table-layout:auto; }
button, input, select, textarea { font:inherit; }
button { -webkit-tap-highlight-color:transparent; }
button:focus-visible, a:focus-visible { outline:3px solid var(--brand-light); outline-offset:3px; }
::selection { color:#fff; background:var(--brand-strong); }
@media (max-width: 950px) {
  .welcome-strip { margin:18px 16px 0; }
  .main-grid { margin-top:14px; }
}
@media (max-width: 600px) {
  .card div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns:1fr !important; }
  header { padding:12px 14px; }
  .header-content { align-items:flex-start; }
  .brand-mark { width:36px; height:36px; flex-basis:36px; border-radius:10px; }
  .brand-title { font-size:.92rem; }
  .brand-sub { max-width:245px; font-size:.58rem; }
  .header-buttons { width:100%; }
  .btn-hdr { padding:8px 10px; font-size:.73rem; }
  .welcome-strip { margin:14px 12px 0; padding:18px; align-items:flex-start; flex-direction:column; gap:14px; }
  .welcome-strip p { font-size:.8rem; }
  .welcome-status { font-size:.68rem; }
  .main-grid { padding:0 12px; }
  .card { padding:16px; margin-bottom:14px; }
  .card-title { align-items:flex-start; gap:8px; }
  .table-custom { min-width:520px; }
  .modal-overlay { padding:8px; }
  .modal-body { padding:14px; }
  .modal-header, .modal-footer { padding:12px 14px; }
  .modal-header h3 { font-size:.92rem !important; }
  .quote-paper { padding:14px; }
  .quote-table { width:100%; min-width:0; }
}
@media (max-width: 380px) {
  .header-buttons { gap:6px; }
  .header-buttons .btn-hdr { flex:1 1 auto; justify-content:center; }
  .table-custom { font-size:.74rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}
@media print {
  body { background:#fff !important; }
  .modal-overlay { position:absolute; padding:0; background:#fff; }
  .modal-box { max-width:none; max-height:none; border:0; box-shadow:none; }
  .modal-header, .modal-footer { display:none !important; }
  .modal-body { padding:0 !important; background:#fff !important; }
  #printableQuoteArea { box-shadow:none; }
  .quote-table { width:100%; min-width:0 !important; table-layout:fixed; font-size:.64rem; }
  .quote-table th, .quote-table td { padding:4px 3px; overflow-wrap:anywhere; }
}