/* =========================
   Variables & Base
========================= */
:root{
  --primary:#1e3a8a;      /* azul marca */
  --primary2:#2563eb;     /* azul vivo */
  --accent:#60a5fa;       /* azul claro */
  --neutral:#f6f8fc;      /* fondo */
  --text:#0f172a;         /* texto */
  --white:#ffffff;
  --muted:#64748b;
  --border:#e5e7eb;
  --shadow:0 10px 25px rgba(0,0,0,.08);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body.bg{
  margin:0;
  color:var(--text);
  background:linear-gradient(135deg,var(--neutral),#eef2ff);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

table,
table th,
table td,
table caption {
  font-size: 12px;   /* cámbialo a 12px, 16px, etc. */
  line-height: 1.4;  /* opcional, mejora legibilidad */
}


a{ color:var(--primary2); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* =========================
   Login
========================= */
.login-card{
  width:min(420px,92%);
  margin:6vh auto;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:28px 26px;
}
.brand{ text-align:center; margin-bottom:12px; }
.brand img{ height:64px; margin-bottom:8px; }
.brand h1{ font-size:1.15rem; margin:.25rem 0; color:var(--primary); }
.brand .subtitle{ color:#475569; margin:0; }

.alert{
  background:#fee2e2;
  border:1px solid #fecaca;
  color:#991b1b;
  padding:10px 12px;
  border-radius:10px;
  margin:12px 0;
}

.form{ display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.form label{ font-weight:600; color:#334155; }
.form input{
  padding:12px;
  border:1px solid #cbd5e1;
  border-radius:12px;
  outline:none;
  background:#fff;
}
.form input:focus{
  border-color:var(--primary2);
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}

.form button{
  margin-top:8px;
  padding:12px 14px;
  border:none;
  border-radius:12px;
  background:linear-gradient(180deg,var(--primary2),var(--primary));
  color:#fff;
  font-weight:700;
  cursor:pointer;
}
.form button:hover{ filter:brightness(1.05); }

footer{ margin-top:12px; text-align:center; color:#64748b; font-size:.85rem; }

/* =========================
   Topbar
========================= */
.topbar{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; background:#fff; border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:10;
}
.menu-toggle{ border:none; background:transparent; font-size:1.25rem; cursor:pointer; }
.brand-mini{ display:flex; align-items:center; gap:8px; color:var(--primary); font-weight:800; }
.brand-mini img{ height:32px; width:auto; display:block; }
.spacer{ flex:1; }
.logout{ margin-left:12px; text-decoration:none; color:var(--primary2); font-weight:700; }

/* =========================
   Layout + Sidebar
========================= */
.layout{
  display:grid;
  grid-template-columns:190px 1fr;
  min-height:calc(100vh - 56px);
}
.sidebar{
  background:#fff;
  border-right:1px solid var(--border);
  padding:14px 10px;
}
.menu{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.menu a{
  display:block; padding:10px 12px; border-radius:10px;
  color:var(--text); border:1px solid transparent;
}
.menu li.active a{
  background:#eef2ff; border-color:#dbeafe; color:var(--primary); font-weight:700;
}
.menu a:hover{ background:#f8fafc; border-color:var(--border); }

.main{ padding:18px; }

.content-area{
  background:#fff; border:1px solid var(--border); border-radius:14px;
  padding:16px; box-shadow:0 10px 25px rgba(0,0,0,.04);
}

/* =========================
   Cards (Home)
========================= */
.cards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px; margin-top:16px;
}
.card{
  display:block; padding:16px; background:#fff; border:1px solid var(--border);
  border-radius:14px; box-shadow:var(--shadow); color:inherit;
}
.card h3{ margin:0 0 6px 0; color:var(--primary2); }
.card p{ margin:0; color:#475569; }

/* =========================
   Overlay móvil
========================= */
.overlay{
  display:none; position:fixed; z-index:15; top:56px; left:0; right:0; bottom:0;
  background:rgba(0,0,0,.25);
}
.overlay.show{ display:block; }

/* =========================
   Responsive
========================= */
@media (max-width:900px){
  .layout{ grid-template-columns:1fr; }
  .sidebar{
    position:fixed; z-index:20; top:56px; left:0; width:260px; height:calc(100vh - 56px);
    transform:translateX(-100%); transition:transform .25s ease;
    box-shadow:0 10px 25px rgba(0,0,0,.12); background:#fff;
  }
  .sidebar.open{ transform:translateX(0); }
  .main{ padding:14px; }
}
@media (min-width:901px){
  .layout.collapsed{ grid-template-columns:0 1fr; }
  .layout.collapsed .sidebar{ width:0; padding:0; border-right:none; overflow:hidden; }
}

/* =========================
   Utilidades / Componentes
========================= */
/* Paneles y encabezados */
.panel-head{
  display:flex; align-items:center; gap:12px; justify-content:space-between;
  margin-bottom:12px;
}

/* Botones */
.btn{
  display:inline-flex; align-items:center; gap:.5rem; padding:.6rem .9rem; border-radius:10px;
  background:var(--primary2); color:#fff; border:1px solid var(--primary2); cursor:pointer;
}
.btn:hover{ filter:brightness(1.05); }
.btn.primary{ background:#2563eb; color:#fff; border-color:#2563eb; }
.btn.danger{ background:#ef4444; color:#fff; border-color:#ef4444; }
.btn.sm{ padding:4px 8px; font-size:12px; }
.btn.icon{ font-size:20px; line-height:1; }

/* Grid de formularios */
.grid{
  display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:10px;
}
@media (max-width:720px){ .grid{ grid-template-columns:1fr; } }

/* Inputs sueltos reutilizables (barra de búsqueda, etc.) */
.input{
  width:min(380px,100%);
  padding:10px 12px;
  border:1px solid #cbd5e1;
  border-radius:12px;
  background:#fff;
  outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.input:focus{
  border-color:var(--primary2);
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}

/* Badges */
.badge{
  display:inline-block; padding:.25rem .5rem; border-radius:999px;
  background:#eef2ff; color:#1e3a8a; font-weight:600;
}

/* Mensajes */
.msg{
  margin:8px 0 12px; padding:8px; border-radius:6px;
  background:#f8fafc; border:1px solid var(--border); color:#334155;
}

/* =========================
   Tablas (global)
========================= */
.table-wrap{ overflow-x:auto; }

.table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
}
.table th,
.table td{
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  text-align:left;
}
.table th{ background:#f1f5f9; color:#334155; font-weight:700; }

/* =========================
   Barra de filtro de tablas
========================= */
.table-tools{
  display:flex; gap:10px; align-items:center; justify-content:space-between;
  margin:10px 0 8px;
}
.table-tools .tools-right{ display:flex; gap:10px; align-items:center; }
.muted{ color:#64748b; font-size:.9rem; }

/* =========================
   Selects (global + clase)
========================= */
.form select,
select.form-select{
  display:block;
  width:100%;
  padding:8px 10px;
  border:1px solid #cbd5e1;
  border-radius:12px;                 /* consistente con inputs */
  background:#fff;
  color:#0f172a;
  font-size:14px;
  line-height:1.4;
  outline:none;
  transition:border-color .2s, box-shadow .2s;

  /* quitar estilo nativo y flecha del sistema */
  appearance:none; -webkit-appearance:none; -moz-appearance:none;

  /* flecha SVG ligera */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:12px 12px;
  padding-right:34px;                 /* espacio para flecha */
}
.form select:hover,
select.form-select:hover{ border-color:var(--primary2); }
.form select:focus,
select.form-select:focus{
  border-color:var(--primary2);
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
/* Deshabilitado */
.form select:disabled,
select.form-select:disabled{
  background:#f1f5f9;
  color:#94a3b8;
  cursor:not-allowed;
}
/* Select multiple: sin flecha y altura mayor */
.form select[multiple],
select.form-select[multiple]{
  background-image:none;
  padding-right:10px;
  min-height:120px;                   /* ajusta a tu gusto */
}
/* Tamaños opcionales */
.select-sm{ padding:6px 8px; border-radius:10px; font-size:13px; }
.select-lg{ padding:12px 14px; border-radius:14px; font-size:16px; }
/* Validación */
.form select:invalid,
select.form-select:invalid{ border-color:#ef4444; }
.form select:valid,
select.form-select:valid{ border-color:#22c55e; }
/* IE/Edge Legacy */
select::-ms-expand{ display:none; }




/* estilos mínimos del paginador (si aún no los tienes globales) */
.pager{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  margin-top:10px;
  flex-wrap:wrap;
}
.pager .pager-info{ color:#64748b; }
.pager .btn[disabled]{ opacity:.6; cursor:not-allowed; }



.btn-img, 
.btn.sm.primary img {
  width: 20px;   /* ajusta tamaño */
  height: 20px;
  cursor: pointer;
}

.btn-img { cursor: pointer; }
.is-loading { opacity:.6; pointer-events:none; }

.small-form { max-width: 800px; margin: 0 auto; }
.form .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.form-foot { margin-top: 15px; display: flex; gap: 10px; justify-content: flex-end; }
@media (max-width:720px){ .form .grid { grid-template-columns: 1fr; } }





/* Normalizar enlaces y botones con clase .btn */
/* Normalizar botones <a> y <button> */
a.btn, button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 10px 18px;     /* mismo padding para todos */
  font-size: 14px;
  line-height: normal;       /* fuerza line-height */
  border-radius: 10px;
  text-decoration: none;
  min-width: 120px;       /* ancho mínimo uniforme */
  text-align: center;
  font-weight: 600;
}

/* Botón Cancelar */
.btn.cancelar {
  background: #7e8c9d;
  color: #fff;
  border: 1px solid #9fabb8;
}
.btn.cancelar:hover { filter: brightness(1.05); }

/* Botón Volver */
.btn.volver {
  background: #6798d0;
  color: #fff;
  border: 1px solid #777d84;
}
.btn.volver:hover { filter: brightness(1.05); }

/* Botón Guardar */
.btn.guardar {
  background: #0f89da;
  color: #fff;
  border: 1px solid #16b2b5;
}
.btn.guardar:hover { filter: brightness(1.05); }





/* ===== Submenús en sidebar ===== */
.menu li.has-sub > .submenu-toggle {
  display:block;
  padding:10px 12px;
  border-radius:10px;
  color:var(--text);
  border:1px solid transparent;
}
.menu li.has-sub > .submenu-toggle:hover{
  background:#f8fafc; border-color:var(--border);
}
.menu li.has-sub.open > .submenu-toggle{
  background:#eef2ff; border-color:#dbeafe; color:var(--primary); font-weight:700;
}

/* contenedor del submenú */
.menu .submenu{
  display:none;
  list-style:none;
  margin:6px 0 8px 0;
  padding-left:10px;          /* sangría */
  border-left:3px solid #e5e7eb;
}
.menu li.has-sub.open > .submenu{ display:block; }

/* enlaces del submenú */
.menu .submenu a{
  display:block; padding:8px 10px; border-radius:8px;
  color:#334155; border:1px solid transparent;
}
.menu .submenu a:hover{ background:#f8fafc; border-color:#e5e7eb; }
.menu .submenu li.active a{
  background:#eef2ff; border-color:#dbeafe; color:var(--primary); font-weight:700;
}



/* Estilo común */
input[type="date"]{
  font: 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  height: 36px;
  padding: 0 36px 0 12px;          /* espacio para el icono a la derecha */
  border: 1px solid #cbd5e1;       /* slate-300 */
  border-radius: 8px;
  background: #fff;
  color: #0f172a;                  /* slate-900 */
  box-sizing: border-box;
}
input[type="date"]:hover{ border-color:#94a3b8; }   /* slate-400 */
input[type="date"]:focus{
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px rgba(59,130,246,.35);        /* azul suave */
  border-color:#60a5fa;                               /* blue-400 */
}
input[type="date"]:disabled{
  background:#f1f5f9;                                 /* slate-100 */
  color:#94a3b8;
}

/* Elimina “flechas”/apariencia nativa donde se pueda */
input[type="date"]{
  -webkit-appearance: none;
  appearance: none;
}





/* Evitar que el dropdown de Choices se recorte dentro de tablas */
.table { overflow: visible; }
.table-wrap { overflow: visible; }          /* por si el wrap también limita */
.choices { z-index: 1000; position: relative; } /* asegúralo por encima */

/* Select2 */
  .select2-container { z-index: 10000 !important; }
  .select2-container--open { z-index: 10001 !important; }

  /* Choices.js */
  .choices.is-open { z-index: 10000; }

  /* Tom Select */
  .ts-wrapper.plugin-dropdown_input.focus,
  .ts-wrapper.open { z-index: 10000; }

  /* Asegura que el contenedor del formulario no oculte el dropdown */
  .panel.small-form, .form { overflow: visible; }





#aumentar {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: zoom-in;
  position: relative;
  z-index: 1;
}

#aumentar:hover {
  transform: scale(2.5);                /* Doble de tamaño */
  z-index: 1000;                      /* Se pone encima de todo */
  position: relative;                 /* Asegura que flote */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);  /* Sombrita para destacar */
}




.btn-img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: zoom-in;
  position: relative;
  z-index: 1;
}

.btn-img:hover {
  transform: scale(1.2);                /* Aumenta al doble */
  z-index: 1000;                      /* Flota sobre los demás elementos */
  position: relative;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Efecto sombra elegante */
}


/* Aplica a todas las tablas */
table tr:hover {
  background-color: rgba(0, 0, 0, 0.05); /* gris muy leve */
  transition: background-color 0.2s ease;
  cursor: pointer; /* opcional, da sensación interactiva */
}

/* ================================
  bOTON aGREGAR
   ================================ */

button.small {
    font-size: 25px;        /* texto un poco más pequeño */
    padding: 2px 8px;      /* alto y ancho del botón */
    min-width: 60px;        /* ancho mínimo */
    height: 20px;           /* alto fijo (opcional) */
    border-radius: 6px;     /* bordes redondeados */
    border: 1px solid #2563eb;
    background-color: #2563eb;
    color: #ffffff;
    cursor: pointer;
}

/* efecto hover opcional */
button.small:hover {
    background-color: #2B8F61;
 	border: 1px solid #134730;
}

button.ghost {
    font-size: 25px;        /* texto un poco más pequeño */
    padding: 2px 8px;      /* alto y ancho del botón */
    min-width: 60px;        /* ancho mínimo */
    height: 20px;           /* alto fijo (opcional) */
    border-radius: 6px;     /* bordes redondeados */
    border: 1px solid #2563eb;
    background-color: #2563eb;
    color: #ffffff;
    cursor: pointer;
}

/* efecto hover opcional */
button.ghost:hover {
    background-color: #537BCF;
 	border: 1px solid #134730;
}






/* ================================
   TABLA BUSCADOR
   ================================ */

#prodToQuoteTable tbody td {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    font-size: 12px !important;
    vertical-align: middle !important;
}

/* Las filas seguirán la altura del contenido */
#prodToQuoteTable tbody tr {
    line-height: 1 !important;
}

/* 🎉 EFECTO HOVER EN LA FILA COMPLETA */
#prodToQuoteTable  tbody tr:hover {
     font-weight: 500 !important;     /* negrita */
    font-size: 12px !important;
    cursor: pointer;
}


/* Ajustar imágenes para que no expandan la fila */
#prodToQuoteTable tbody img {
    height: 30px !important;   /* ← ésta es la clave */
    width: auto !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Compactar encabezado */
#prodToQuoteTable thead th {
    padding: 4px 6px !important;
    font-size: 14px !important;
    height: 28px !important;
    vertical-align: middle !important;
}




/* ================================
   TABLA ULTRA COMPACTA DETALLE
   ================================ */

#tblCotizacionDetalle tbody td {
    padding: 1px 4px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

/* Compactar filas */
#tblCotizacionDetalle tbody tr {
    line-height: 1 !important;
	transition: all 0.15s ease-in-out; /* animación suave */
}

/* 🎉 EFECTO HOVER EN LA FILA COMPLETA */
#tblCotizacionDetalle tbody tr:hover {
    font-weight: 500 !important;     /* negrita */
    font-size: 12px !important;      /* texto más grande */
    background-color: #f0f4ff !important;  /* opcional: leve fondo azul */
    cursor: pointer;
}


/* Reducir imagen del producto */
#tblCotizacionDetalle tbody img.js-prod-logo {
    height: 30px !important;
    max-width: 30px !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Inputs de cantidad, precio, subtotal, ganancia */
#tblCotizacionDetalle input.input,
#tblCotizacionDetalle input[type="number"],
#tblCotizacionDetalle input[type="text"] {
    height: 22px !important;         /* compacto */
    font-size: 12px !important;
    padding: 0px 4px !important;
    line-height: 1 !important;
}

/* Nombre de producto (label con span) */
#tblCotizacionDetalle .prod-name-label .prod-name-text {
    font-size: 13px !important;
    line-height: 1.1 !important;
    padding: 2px 4px !important;
}

/* Botón eliminar fila */
#tblCotizacionDetalle button[data-del-row] {
    height: 20px !important;
    width: 20px !important;
    padding: 0 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    text-align: center !important;
}