:root{
    --granate:#8E1E26; --granate-osc:#5E1418; --dorado:#C7A76A; --marfil:#F4EFE6;
    --negro:#111111; --tinta:#1E1E1E; --muted:#8a8a8a; --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.25);
  }
  *{box-sizing:border-box} html,body{height:100%}
  body{
    margin:0;
    background:
      linear-gradient(90deg, rgba(142,30,38,.35) 0%, rgba(142,30,38,0) 420px),
      linear-gradient(180deg,#0e0e0e,#151515 30%,#0f0f0f);
    color:#fff; font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif; line-height:1.45;
    color-scheme: dark;
  }
  .app{ display:grid; grid-template-columns:280px 1fr; grid-template-rows:64px 1fr;
    grid-template-areas:"sidebar topbar" "sidebar main"; min-height:100dvh; }
  .sidebar{ grid-area:sidebar; background:radial-gradient(120% 120% at 0% 0%,var(--granate) 0%,var(--granate-osc) 60%,#2b0c0e 100%);
    border-right:1px solid rgba(255,255,255,.06); padding:22px 18px; position:sticky; top:0; height:100dvh; overflow:auto; }
  .brand{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
  .logo-container {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  
  .logo-img {
    width: 90px;
    height: auto;
    filter: drop-shadow(0 0 6px rgba(0,0,0,0.7));
  }  
  
  .logo-img:hover {
    transform: scale(1.05);
  }

  .brand h1{ font-size:1.05rem; letter-spacing:.12em; margin:0; text-transform:uppercase; }
  .tagline{ font-size:.78rem; color:rgba(255,255,255,.7); margin:2px 0 0 0; }
  .nav{ display:grid; gap:6px; margin-top:8px; }
  .nav a, .nav button{ -webkit-appearance:none; -moz-appearance:none; appearance:none; border:1px solid transparent; background:transparent; color:#fff; text-decoration:none;
    display:flex; width:100%; align-items:center; gap:12px; padding:12px 12px; border-radius:12px; cursor:pointer; transition:.2s; }
  .nav a:hover, .nav button:hover{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.08) }
  .nav .active{ background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.02));
    border-color:rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
  .chip{ margin-left:auto; font-size:.72rem; color:#fff; background:rgba(0,0,0,.3); padding:4px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.12); }
  
  .topbar{ grid-area:topbar; display:flex; align-items:center; gap:12px; border-bottom:1px solid rgba(255,255,255,.06);
    background:linear-gradient(180deg,#111,#0f0f0f); padding:8px 18px; position:sticky; top:0; z-index:5; min-width:0; }
  .search{
    display:flex;
    align-items:center;
    gap:10px;
    background:#131313;
    border:1px solid #212121;
    border-radius:999px;
    padding:8px 12px;
    flex:1;
    min-width:0;
    position:relative;
  }
  .search input{ background:transparent; border:0; color:#fff; outline:none; width:100%; font-size:.95rem; }

  .search-dropdown{
    position:absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background:#0f0f0f;
    border:1px solid rgba(255,255,255,.10);
    border-radius:14px;
    box-shadow: var(--shadow);
    overflow:hidden;
    z-index: 50;
  }
  .search-item{
    display:flex;
    gap:10px;
    padding:10px 12px;
    cursor:pointer;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .search-item:last-child{ border-bottom:0; }
  .search-item:hover{ background: rgba(255,255,255,.06); }
  .search-item .type{
    width: 26px;
    height: 26px;
    border-radius: 10px;
    display:flex;
    align-items:center;
    justify-content:center;
    background: rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.10);
    flex: 0 0 26px;
  }
  .search-item .meta{ display:flex; flex-direction:column; min-width:0; }
  .search-item .label{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .search-item .desc{ font-size:.82rem; color: rgba(255,255,255,.65); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .search-empty{ padding:10px 12px; color: rgba(255,255,255,.65); }
  
  .actions{ display:flex; align-items:center; gap:10px; }
  .btn{ -webkit-appearance:none; -moz-appearance:none; appearance:none; border:1px solid #2a2a2a; color:#fff; background:#191919; padding:5px 9px; font-size:.84rem; line-height:1.1; border-radius:12px; cursor:pointer; transition:.2s; }
  .btn:hover{ border-color:#3a3a3a; background:#1f1f1f }
  .btn.primary{ background:linear-gradient(180deg,var(--granate),var(--granate-osc)); border-color:rgba(255,255,255,.12); box-shadow:0 8px 18px rgba(142,30,38,.35); }
  .btn.primary:hover{ filter:brightness(1.04); box-shadow:0 10px 22px rgba(142,30,38,.45); }
  .btn.ghost{ background:transparent }
  .btn.menu{ display:none }

  .head .actions > .btn,
  .panel-head .actions > .btn{ padding:11px 16px; font-size:.92rem; line-height:1.2; }

  .profit{ font-weight:800; }
  .profit.pos{ color:#2ee58a; }
  .profit.neg{ color:#ff4d4d; }
  .profit.zero{ color:rgba(255,255,255,.75); }

  .btn-icon{
    width:36px;
    height:36px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    border-color:rgba(255,255,255,.10);
    box-shadow:0 6px 16px rgba(0,0,0,.25);
  }
  .btn-icon:hover{
    transform: translateY(-1px);
    filter: brightness(1.03);
    border-color:rgba(255,255,255,.18);
    box-shadow:0 10px 20px rgba(0,0,0,.35);
  }
  .btn-icon:active{
    transform: translateY(0);
    box-shadow:0 6px 16px rgba(0,0,0,.25);
  }

  /* Iconos (SVG embebido) */
  .btn-edit{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='32' fill='%232aa2ff'/%3E%3Cpath fill='%23fff' d='M41.7 14.8c1.4-1.4 3.7-1.4 5.1 0l2.4 2.4c1.4 1.4 1.4 3.7 0 5.1L28.2 43.3l-10.9 2.4 2.4-10.9L41.7 14.8z'/%3E%3Cpath fill='%23fff' d='M16.4 47.6h31.2c1.1 0 2 .9 2 2v2.2c0 1.1-.9 2-2 2H16.4c-1.1 0-2-.9-2-2v-2.2c0-1.1.9-2 2-2z' opacity='.0'/%3E%3C/svg%3E");
    background-color: transparent;
    width:36px;
    height:36px;
    min-width:36px;
    min-height:36px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 36px;
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
  }
  .btn-delete{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='32' fill='%23ff3b30'/%3E%3Cpath fill='%23fff' d='M22 22h20l-1.2 25.6c-.1 2-1.7 3.6-3.7 3.6H26.9c-2 0-3.6-1.6-3.7-3.6L22 22zm6.5 4.8c.7 0 1.2.5 1.2 1.2v18.4c0 .7-.5 1.2-1.2 1.2s-1.2-.5-1.2-1.2V28c0-.7.5-1.2 1.2-1.2zm7 0c.7 0 1.2.5 1.2 1.2v18.4c0 .7-.5 1.2-1.2 1.2s-1.2-.5-1.2-1.2V28c0-.7.5-1.2 1.2-1.2z'/%3E%3Cpath fill='%23fff' d='M20 18h8l1-2h6l1 2h8c1.1 0 2 .9 2 2v1H18v-1c0-1.1.9-2 2-2z'/%3E%3C/svg%3E");
    background-color: transparent;
    width:36px;
    height:36px;
    min-width:36px;
    min-height:36px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 36px;
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
  }
  
  .main {
    grid-area: main;
    padding: 22px;
    display: grid;
    gap: 22px;
    max-width: 1200px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin-inline: auto;
    grid-auto-rows: min-content;
    overflow-x: visible; /* evita que el contenido desborde */
  }
  

  .main > * {
    width: 100%;
  }  

  .head{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
  }
  .title h2{ margin:0; letter-spacing:.02em } .crumbs{ color:var(--muted); font-size:.9rem }
  
  .kpis{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
  .card{ background:linear-gradient(180deg,#191919,#111); border:1px solid rgba(255,255,255,.10);
    border-radius:var(--radius); padding:16px; box-shadow:0 8px 24px rgba(0,0,0,.35); }
  .card .label{ color:var(--muted); font-size:.82rem } .card .value{ font-size:1.6rem; font-weight:700; margin-top:4px } .trend{ font-size:.82rem; margin-top:8px; color:#cfcfcf }
  
  .panel{ background:linear-gradient(180deg,#151515,#0f0f0f); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); padding:12px; }
  .panel-head{ display:flex; align-items:center; gap:12px; justify-content:space-between; flex-wrap:wrap; padding:6px 6px 12px; border-bottom:1px dashed rgba(255,255,255,.12); }
  .filters{ display:flex; gap:8px; flex-wrap:wrap; min-width:0 }
  .field{ display:flex; align-items:center; gap:8px; background:#131313; border:1px solid #202020; padding:8px 10px; border-radius:10px; min-width:0 }
  .field input,.field select{ background:transparent; border:0; color:#fff; outline:none; font-size:.92rem; }
  .field select{
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 6px center;
    background-repeat: no-repeat;
    background-size: 14px;
    padding-right: 24px;
    min-height: 20px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color .15s ease;
  }
  .field select:hover{ background-color: rgba(255,255,255,.04); }
  .field select:focus{ background-color: rgba(255,255,255,.06); }
  .field input[type="number"]{-webkit-appearance:textfield; -moz-appearance:textfield; appearance:textfield}
  .field input[type="number"]::-webkit-outer-spin-button,
  .field input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
  
  .list{ display:grid; gap:10px; margin-top:12px; }
  .row{ display:grid; gap:12px; grid-template-columns:120px 140px 1fr 110px 130px 130px 120px;
    align-items:center; background:linear-gradient(180deg,#141414,#101010); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:12px;
    transition:border-color .15s ease, transform .06s ease; }

  .row.vehiculos{grid-template-columns:95px 105px 1fr 65px 100px 120px 120px 95px 170px;}
  .row.clientes{grid-template-columns:42px 100px 95px 1fr 110px 78px 220px;}
  .row.reservas{grid-template-columns:32px 86px 1fr 92px 72px 110px 410px;}
  .row.mantenimientos{grid-template-columns:1fr 90px 140px 90px 90px;}
  .row.documentos{grid-template-columns:30px 1fr 80px 150px 70px;}
  .row.documentospag{grid-template-columns:30px 120px 120px 1fr 80px 150px 70px;}
  .row.usuarios{grid-template-columns:30px 120px 1fr 150px 100px 150px 300px;}
  .row.proveedores{grid-template-columns:30px 120px 220px 160px 1fr 150px 90px 76px;}
  .row.mantenimientospag{grid-template-columns:50px 1fr 200px 130px 110px 80px 80px;}
  .row.contabilidad{grid-template-columns:90px 1fr 70px 90px 120px 90px 90px 90px 100px 100px;}
  .row.cuentas{grid-template-columns:150px 1fr;}
  .row.movimientos{grid-template-columns:90px 100px 120px 120px 1fr 100px 250px 90px;}
  .row.ventaspag{grid-template-columns:32px minmax(82px,.85fr) minmax(220px,1.9fr) minmax(106px,1.05fr) minmax(60px,.55fr) minmax(76px,.7fr) minmax(76px,.7fr) minmax(86px,.85fr) minmax(82px,.85fr) minmax(82px,.85fr) 76px;}
  .row.ventaspag{ gap:10px; padding:10px; }
  .row:not(.head-row):hover{ border-color:rgba(199,167,106,.45); transform:translateY(-1px); }
  .row[data-href]{ cursor:pointer; }
  .row[data-href] .actions-row{ cursor:default; }
  .head-row{ background:transparent; border:0; color:var(--muted); }
  .badge{ font-size:.76rem; padding:6px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.18); display:inline-flex; align-items:center; gap:6px; }
  
  .badge.ok{ background:rgba(31,138,76,.15); border-color:rgba(31,138,76,.5) }
  .badge.warn{ background:rgba(182,139,0,.16); border-color:rgba(182,139,0,.55) }
  .badge.lila{ background:rgba(134, 93, 201, 0.18); border-color:rgba(176, 132, 255, 0.72) }
  .badge.info{ background:rgba(25, 92, 151, 0.18); border-color:rgba(66, 149, 221, 0.769) }
  .badge.off{ background:rgba(142,30,38,.18); border-color:rgba(142,30,38,.55) }
  .price{ font-weight:700 }
  .actions-row{ display:flex; gap:8px; justify-content:flex-end }
  .actions-end{ margin-left:auto; display:flex; gap:8px; justify-content:flex-end }

  .row.reservas .actions-row > a.btn:not(.btn-icon),
  .row.reservas .actions-row > button.btn:not(.btn-icon){
    white-space:nowrap !important;
    word-break:keep-all;
    min-width:0;
    flex:0 1 auto;
  }

  .modal{ position:fixed; inset:0; display:none; place-items:center; background:rgba(0,0,0,.55); padding:20px; z-index:20; }
  .modal.open{ display:grid }
  .modal .box{ width:min(860px,100%); background:#121212; border:1px solid rgba(255,255,255,.12); border-radius:18px; box-shadow:var(--shadow); padding:18px; max-height:85dvh; overflow:auto; }
  
  .grid{ display:grid; gap:12px; grid-template-columns:repeat(12,1fr); }
  .col-12{ grid-column:span 12 }
  .col-9{ grid-column:span 9 }
  .col-8{ grid-column:span 8 }
  .col-6{ grid-column:span 6 }
  .col-5{ grid-column:span 5 }
  .col-4{ grid-column:span 4 }
  .col-3{ grid-column:span 3 }
  .col-2{ grid-column:span 2 }
  .input{ display:grid; gap:6px; background:#0f0f0f; border:1px solid #2a2a2a; border-radius:12px; padding:10px 12px; }
  .input label{ font-size:.82rem; color:var(--muted) }
  .input input,.input textarea{ background:transparent; border:0; color:#fff; outline:none; font-size:.96rem; resize:vertical; }
  .input select{
    color-scheme: dark;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 8px center;
    background-repeat: no-repeat;
    background-size: 16px;
    padding-right: 32px;
    min-height: 24px;
    cursor: pointer;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    outline: none;
    color: #fff;
    transition: background-color .15s ease;
  }
  .input select:hover{ background-color: rgba(255,255,255,.04); }
  .input select:focus{ background-color: rgba(255,255,255,.06); }
  .input select option,.input select optgroup{ background:#141414; color:#fff; }
  .field select option,.field select optgroup{ background:#141414; color:#fff; }
  
  .divider{ height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent); margin:10px 0; }
  
  .foot{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:14px; }
  .brandbar{ display:flex; align-items:center; gap:10px; color:var(--marfil); font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; }
  .brandbar .mark{ width:26px; height:26px; border-radius:8px; background:linear-gradient(135deg,var(--dorado),#a5853f); box-shadow:inset 0 0 0 1px rgba(0,0,0,.35); }
  
  @media (max-width:1100px){
    .kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .row{ grid-template-columns:110px 120px 1fr 110px 120px 120px 100px; }
    .row.vehiculos{ grid-template-columns:90px 100px 1fr 65px 95px 115px 115px 90px 165px; }
    .row.clientes{ grid-template-columns:42px 95px 90px 1fr 110px 78px 210px; }
    .row.reservas{ grid-template-columns:30px 82px 1fr 88px 70px 106px 390px; }
  }
  @media (max-width:880px){
    .app{ grid-template-columns:1fr; grid-template-areas:"topbar" "main"; }
    .sidebar{ position:fixed; inset:0 auto 0 0; width:80%; max-width:320px; transform:translateX(-100%); transition:.25s ease; z-index:30; }
    .sidebar.open{ transform:none }
    .btn.menu{ display:inline-block }
    .row{ grid-template-columns:1fr; align-items:start }
    .actions-row{ justify-content:flex-start }
  }

  @media (max-width:720px){
    .modal .grid{ gap:10px; }
    .modal .col-12,
    .modal .col-9,
    .modal .col-8,
    .modal .col-6,
    .modal .col-5,
    .modal .col-4,
    .modal .col-3,
    .modal .col-2{ grid-column:span 12; }
  }
  :focus-visible{ outline:2px solid rgba(199,167,106,.9); outline-offset:2px; }

  a{
    color: white;
    text-decoration: none;
  }

.no-margin{margin:0;}
.modal-title{margin-top:0;}
.muted-weak{font-weight:500;color:#cfcfcf;}
.flex-gap{display:flex;gap:10px;align-items:center;}
.hidden{display:none;}
.filters-inline{display:flex;gap:.5rem;flex-wrap:wrap;}
.display-contents{display:contents;}
.flex-between{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.mt-2{margin-top:2px;}
.gap-10{gap:10px;}
.minw-180{min-width:180px;}
.minw-220{min-width:220px;}
.minw-320{min-width:320px;}
.grid-span-all-muted{grid-column:1/-1;opacity:.7;padding:.5rem 0;}
.justify-end{display:flex;gap:8px;justify-content:flex-end;}
.modal-h3{margin:6px 0 12px;}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill{
    -webkit-box-shadow: none !important;
    -webkit-text-fill-color: #ffffff !important;
    transition: background-color 5000s ease-in-out 0s;
}