/* ==========================================================================
   OS TourVirtual — Hoja de estilos (Paleta Corporativa)
   ========================================================================== */
:root{
  /* === Paleta Corporativa === */
  --azul-marino:#1F3046;          /* Principal: encabezados, títulos, botones primarios */
  --azul-marino-osc:#142133;      /* Variante más oscura para gradientes y hover */
  --dorado:#AD9271;               /* Acento: tablas, etiquetas, subtítulos */
  --dorado-osc:#8C7358;           /* Dorado oscuro para hover y énfasis */
  --dorado-claro:#F7F4EF;         /* Fondo suave cálido */
  --crema:#F8F9FA;                /* Fondo suave frío */

  /* === Neutros === */
  --fondo:var(--crema);
  --superficie:#ffffff;
  --texto:#243342;
  --texto-suave:#6b7c8f;
  --borde:#E5E1DA;                /* Borde cálido que combina con el dorado */
  --rojo:#d93025;                 /* Error (funcional) */
  --sombra:0 2px 10px rgba(31,48,70,.08);
}

*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--fondo);color:var(--texto);min-height:100vh;font-size:14.5px;
}

/* ---------- Encabezado ---------- */
.main-header{
  background:linear-gradient(135deg,var(--azul-marino-osc) 0%,var(--azul-marino) 70%,#2a3f5c 100%);
  color:#fff;box-shadow:0 3px 12px rgba(31,48,70,.35);
  position:sticky;top:0;z-index:50;
}
.header-inner{
  max-width:1400px;margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;flex-wrap:wrap;gap:14px;padding:14px 24px;
}
.brand{display:flex;align-items:center;gap:14px;}
.brand-badge{
  width:52px;height:52px;border-radius:14px;background:rgba(173,146,113,.18);
  border:2px solid var(--dorado);display:flex;align-items:center;
  justify-content:center;font-size:22px;font-weight:800;letter-spacing:1px;color:var(--dorado);
}
.brand-text h1{font-size:20px;font-weight:700;line-height:1.1;}
.brand-text span{font-size:12.5px;opacity:.85;}

/* ---------- Pestañas ---------- */
.tabs{display:flex;gap:6px;flex-wrap:wrap;}
.tab-btn{
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);color:#fff;
  padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:.2s;
  font-family:inherit;
}
.tab-btn:hover{background:rgba(255,255,255,.25);}
.tab-btn.active{
  background:var(--dorado);color:var(--azul-marino-osc);
  border-color:var(--dorado);box-shadow:0 2px 8px rgba(31,48,70,.25);
}

/* ---------- Contenedor ---------- */
.container{max-width:1400px;margin:0 auto;padding:26px 24px 60px;}
.tab-content{display:none;animation:aparecer .25s ease;}
.tab-content.active{display:block;}
@keyframes aparecer{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* ---------- Tarjetas ---------- */
.card{
  background:var(--superficie);border-radius:14px;box-shadow:var(--sombra);
  padding:24px 26px;margin-bottom:22px;border:1px solid var(--borde);
}
.card-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:14px;}
.card-title{display:flex;align-items:center;gap:10px;font-size:17px;color:var(--azul-marino);margin-bottom:16px;}
.card-head .card-title{margin-bottom:0;}
.num-badge{
  width:30px;height:30px;border-radius:8px;background:var(--dorado);color:var(--azul-marino-osc);
  display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0;
}

/* ---------- Formularios ---------- */
.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px 16px;}
.form-field{display:flex;flex-direction:column;gap:6px;min-width:0;}
.form-field-wide{grid-column:1/-1;}
.form-label{font-size:12.5px;font-weight:600;color:var(--dorado-osc);text-transform:uppercase;letter-spacing:.4px;}
.form-label em{color:var(--rojo);font-style:normal;}
.form-input{
  width:100%;padding:9px 12px;border:1.5px solid var(--borde);border-radius:8px;
  font-size:14px;color:var(--texto);background:#fff;transition:border-color .15s,box-shadow .15s;font-family:inherit;
}
.form-input:focus{outline:none;border-color:var(--dorado);box-shadow:0 0 0 3px rgba(173,146,113,.2);}
.form-input:disabled{background:var(--crema);color:#5a6b7b;cursor:not-allowed;}
textarea.form-input{resize:vertical;}
.invalido{border-color:var(--rojo)!important;background:#fff5f5;}
.hint{font-size:12.5px;color:var(--texto-suave);margin-top:6px;}

/* Combobox con búsqueda */
.combobox-wrap{max-width:560px;margin-bottom:20px;}
.combobox{position:relative;}
.cb-list{
  position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;
  border:1px solid var(--borde);border-radius:8px;box-shadow:0 8px 24px rgba(31,48,70,.18);
  max-height:260px;overflow-y:auto;z-index:30;display:none;
}
.cb-list.abierta{display:block;}
.cb-item{padding:9px 13px;cursor:pointer;font-size:13.5px;border-bottom:1px solid #f0f3f6;}
.cb-item:last-child{border-bottom:none;}
.cb-item:hover,.cb-item.activa{background:var(--dorado-claro);}
.cb-item .cb-sub{display:block;font-size:11.5px;color:var(--texto-suave);}
.cb-item.cb-nuevo{color:var(--azul-marino);font-weight:700;background:var(--dorado-claro);}

/* ---------- Tablas ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--borde);border-radius:10px;margin-bottom:14px;}
.grid-tabla{width:100%;border-collapse:collapse;min-width:900px;background:#fff;}
#tablaServicios{min-width:1150px;}
.grid-tabla thead th{
  background:var(--azul-marino);color:#fff;padding:10px 12px;text-align:left;
  font-size:12px;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;
}
.grid-tabla tbody td{padding:9px 12px;border-bottom:1px solid #edf1f4;font-size:13.5px;vertical-align:middle;}
.grid-tabla tbody tr:nth-child(even){background:var(--crema);}
.grid-tabla tbody tr:hover{background:var(--dorado-claro);}
.grid-tabla .num{text-align:right;font-variant-numeric:tabular-nums;}
.grid-tabla .folio{font-weight:700;color:var(--dorado-osc);white-space:nowrap;}
.grid-tabla .empty{text-align:center;color:var(--texto-suave);padding:26px;font-style:italic;}
.grid-tabla .acciones{white-space:nowrap;text-align:center;}
td.col-desc,th.col-desc{min-width:180px;}

/* Inputs dentro de la grilla */
.cell-input{
  width:100%;padding:6px 8px;font-size:13px;border:1.5px solid var(--borde);
  border-radius:6px;background:#fff;font-family:inherit;color:var(--texto);
}
.cell-input:focus{outline:none;border-color:var(--dorado);box-shadow:0 0 0 2px rgba(173,146,113,.18);}
select.cell-input{max-width:180px;}
.sel-serv{min-width:170px;}
input.cell-input[type=number]{max-width:90px;text-align:right;}
.td-precio,.td-descuento,.td-subtotal{font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;}
.td-moneda{text-align:center;white-space:nowrap;}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 20px;border:none;border-radius:8px;font-size:14px;font-weight:600;
  cursor:pointer;transition:.18s;font-family:inherit;
}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--azul-marino);color:#fff;box-shadow:0 2px 8px rgba(31,48,70,.35);}
.btn-primary:hover{background:var(--azul-marino-osc);}
.btn-secondary{background:#fff;color:var(--texto);border:1.5px solid var(--borde);}
.btn-secondary:hover{border-color:var(--texto-suave);}
.btn-success{background:var(--dorado);color:var(--azul-marino-osc);}
.btn-success:hover{background:var(--dorado-osc);color:#fff;}
.btn-outline{background:#fff;color:var(--dorado-osc);border:1.5px dashed var(--dorado);}
.btn-outline:hover{background:var(--dorado-claro);}
.btn-block{width:100%;}
.btn-icon{
  width:34px;height:34px;border:none;border-radius:8px;background:var(--crema);cursor:pointer;
  font-size:15px;display:inline-flex;align-items:center;justify-content:center;transition:.15s;margin:0 2px;
}
.btn-icon:hover{filter:brightness(.93);transform:translateY(-1px);}
.btn-xlsx{background:var(--dorado-claro);color:var(--azul-marino);}
.btn-mail{background:#e8f0fe;color:var(--azul-marino);}
.btn-del{background:#fce8e6;color:var(--rojo);}
.acciones-form{display:flex;justify-content:flex-end;gap:12px;margin-top:22px;flex-wrap:wrap;}

/* ---------- Resumen de la orden ---------- */
.resumen{
  margin-top:20px;background:linear-gradient(135deg,var(--dorado-claro),#EFE8DD);
  border:1.5px solid var(--dorado);border-radius:12px;padding:16px 22px;
  display:flex;flex-wrap:wrap;gap:10px 40px;justify-content:flex-end;align-items:center;
}
.resumen-fila{display:flex;flex-direction:column;min-width:150px;}
.resumen-fila span{font-size:11.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--dorado-osc);font-weight:600;}
.resumen-fila strong{font-size:19px;font-variant-numeric:tabular-nums;color:var(--azul-marino);}
.resumen-fila.total strong{font-size:24px;color:var(--azul-marino);}

/* ---------- Barra de búsqueda ---------- */
.barra-busqueda{margin-bottom:16px;display:flex;gap:10px;max-width:520px;}
.barra-busqueda .form-input{flex:1;}

/* ---------- Dos columnas catálogo ---------- */
.dos-columnas{display:grid;grid-template-columns:380px 1fr;gap:22px;align-items:start;}
.dos-columnas .card{margin-bottom:0;}
.dos-columnas .form-field{margin-bottom:14px;}

/* ---------- Toasts ---------- */
.toast-container{position:fixed;top:18px;right:18px;z-index:9999;display:flex;flex-direction:column;gap:10px;}
.toast{
  min-width:280px;max-width:380px;padding:13px 18px;border-radius:10px;color:#fff;
  font-size:13.5px;font-weight:500;box-shadow:0 6px 20px rgba(0,0,0,.25);
  opacity:0;transform:translateX(30px);transition:.35s;
}
.toast.show{opacity:1;transform:none;}
.toast-ok{background:var(--azul-marino);}
.toast-error{background:var(--rojo);}
.toast-info{background:var(--dorado-osc);}

/* ---------- Responsivo ---------- */
@media (max-width:960px){
  .dos-columnas{grid-template-columns:1fr;}
  .header-inner{flex-direction:column;align-items:flex-start;}
}
@media (max-width:640px){
  .form-grid{grid-template-columns:1fr;}
  .resumen{justify-content:flex-start;}
}