/* ==========================================================================
   Cotizador — Hoja de estilos
   Estructura general:
   1) Variables, reset y tipografía base
   2) Contenedor, tarjetas y layout
   3) Formulario y botones
   4) Editor de ítems (desktop)
   5) Previsualización
   6) Guard (no logeado) y utilidades
   7) Historial de cotizaciones (desktop)
   8) Sección móvil (toda la responsividad agrupada al final)
   ========================================================================== */

/* === 1) Variables, reset y tipografía =================================== */
:root{
  --bg:#0b0d10; --text:#e6ecf2; --muted:#a8b0bb; --card:#13161a; --border:#222831;
  --primary:#53b1fd; --primary-ink:#071421; --focus:#7dd3fc; --shadow:rgba(0,0,0,.35);

  /* Editor (desktop): columnas y altura de campos
     Producto | Descripción | Unit | Cant | Sub | Tot | Acciones */
  --field-h: 40px;
  --cols: 1.2fr 1.9fr .9fr .6fr .55fr .6fr 60px;

  /* Historial (desktop): ancho reservado para el botón 'Cargar' */
  --hist-btn-w: 120px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
[hidden]{ display:none !important; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans";
}

/* Baseline (paridad con calculadora) */
img{ max-width:100%; display:block; }
button{ font:inherit; }
input, select, textarea{ font:inherit; color:inherit; font-size:16px; } /* evita zoom en iOS */

/* Guardas anti-overflow genéricas para elementos “difíciles” */
img, svg, canvas, iframe, table{ max-width:100%; height:auto; }

/* === 2) Contenedor, tarjetas y layout =================================== */
.container{ max-width:1080px; margin:24px auto; padding:0 16px; }

.header{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.title{ margin:0; font-size:22px; font-weight:800; }

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  box-shadow:0 14px 40px var(--shadow);
}
.card-title{ margin:0 0 10px 0; font-size:16px; font-weight:700; }

/* Datos comerciales (40%) + Previsualización (60%) */
#cotizador-app .grid-2{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:16px;
}

/* Pila superior: editor, luego historial + grid-2 */
.stack{ display:grid; gap:16px; }

/* === 3) Formulario y botones =========================================== */
.btn{
  background:#18202a;
  color:var(--text);
  border:1px solid var(--border);
  padding:10px 14px;
  border-radius:10px;
  cursor:pointer;
  font-weight:700;
  text-decoration:none;
}
.btn.primary{ background:var(--primary); color:var(--primary-ink); border-color:#3aa6fc; }

#installAppDialog{
  border:none;
  padding:0;
  background:transparent;
  color:var(--text);
  max-width:520px;
  width:calc(100% - 24px);
}

#installAppDialog::backdrop{ background:rgba(0,0,0,.68); }

.install-app-card{ display:grid; gap:14px; }

.install-app-text{
  margin:0;
  color:var(--muted);
  line-height:1.5;
}

.install-app-instructions{
  background:#0d1217;
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px 14px;
  color:var(--text);
  line-height:1.55;
}

.install-app-instructions strong{ color:var(--primary); }

.install-app-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
}

.form-row{ display:grid; gap:6px; margin-bottom:10px; }
.form-row label{ font-size:13px; color:var(--muted); }

input[type="text"], input[type="number"], textarea, select{
  width:100%;
  background:#0d1217;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 12px;
  outline:none;
}
input:focus, textarea:focus, select:focus{
  border-color:var(--focus);
  box-shadow:0 0 0 3px rgba(125,211,252,.15);
}

/* === 4) Editor de ítems (desktop) ======================================= */
/* Cabecera con las MISMAS columnas que las filas para alinear perfecto */
.items-head{
  display:grid;
  grid-template-columns:var(--cols);
  gap:8px;
  color:var(--muted);
  font-size:13px;
  margin:8px 0;
  align-items:center;
}
/* Títulos centrados por defecto… */
.items-head > *{
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:center;
  justify-self:center;
}
/* …excepto Subtotal (col 5) y Total c/imp. (col 6), a la derecha */
.items-head > :nth-child(5),
.items-head > :nth-child(6){
  text-align:right;
  justify-self:end;
}

.items-body{ display:grid; gap:8px; }

/* Fila de ítem (desktop) */
.item-row{
  display:grid;
  grid-template-columns:var(--cols);
  gap:8px;
  align-items:center;
}
.item-row .cell{ display:flex; align-items:center; min-width:0; }
.item-row .cell.desc{ align-items:stretch; }
.item-row .cell.sub, .item-row .cell.tot{ justify-content:flex-end; }

/* Acciones: no estirar el grid-item; el botón queda alineado visualmente */
.item-row .cell.actions{
  display:flex; align-items:center; justify-content:center;
  align-self:center;
}

/* Campos del editor */
.item-row .cell input[type="text"],
.item-row .cell input[type="number"],
.item-row .cell textarea{
  width:100%;
  background:#0d1217; color:var(--text); border:1px solid var(--border);
  border-radius:10px; padding:10px 12px; outline:none;
}

/* Altura unificada de inputs de una línea */
.item-row .cell input[type="text"],
.item-row .cell input[type="number"]{
  height:var(--field-h);
  line-height:1.2;
}

/* Descripción: máx 2 líneas, luego scroll */
.item-row .cell.desc textarea{
  display:block;
  min-height:var(--field-h);
  max-height:calc(var(--field-h)*2);
  line-height:1.35;
  overflow:auto;
  resize:none;
}

/* Botón “✕” (desktop): cuadrado y del alto de los inputs */
.item-row .btn-row-del{
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--field-h); height:var(--field-h);
  padding:0; margin:0; line-height:1;
  border:1px solid var(--border); border-radius:10px;
  background:#18202a;
}
.item-row .btn-row-del:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(125,211,252,.15);
  border-color:var(--focus);
}

/* Acciones y totales (panel inferior del editor) */
.items-actions{ margin-top:8px; }

.totales{ margin-top:12px; display:grid; gap:8px; }
.totales > div{
  display:flex; justify-content:space-between;
  border-bottom:1px dashed rgba(255,255,255,.08);
  padding:4px 0;
}
.totales .total-row strong{ font-size:22px; }

.actions{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }

/* === 5) Previsualización ================================================= */
.preview{
  background:#fff; color:#000;
  border-radius:12px; padding:16px;
  font-size:13px; line-height:1.35;
}

.pv-header{
  display:grid; grid-template-columns:96px 1fr; gap:12px;
  align-items:center; margin-bottom:10px;
}

/* Logo como <img> para nitidez con html2canvas */
.pv-logo{ width:80px; height:80px; border:1px solid #ddd; border-radius:8px; }
.pv-logo img{ width:100%; height:auto; display:block; }

/* Meta: negocio a la izquierda y número/fecha a la derecha */
.pv-meta .pv-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.pv-title{ font-weight:700; font-size:18px; margin:0 0 6px 0; }
.pv-biz{ white-space:pre-line; color:#333; margin:0; line-height:1.35; }
.pv-right{ margin:0; text-align:right; min-width:220px; }
.pv-num, .pv-date{ margin:0; line-height:1.35; font-size:14px; }

/* Tabla compacta */
.pv-table{ width:100%; border-collapse:collapse; margin-top:6px; }
.pv-table th, .pv-table td{ border-bottom:1px solid #ddd; padding:6px 8px; font-size:12.5px; }
.pv-table thead th{ background:#f6f8fa; color:#333; text-align:left; }

/* Columnas numéricas alineadas a la derecha */
.pv-table th:nth-child(3),
.pv-table th:nth-child(4),
.pv-table th:nth-child(5),
.pv-table th:nth-child(6),
.pv-table td:nth-child(3),
.pv-table td:nth-child(4),
.pv-table td:nth-child(5),
.pv-table td:nth-child(6){
  text-align:right;
}

.pv-totals{ margin-top:10px; display:grid; gap:6px; }
.pv-totals > div{ display:flex; justify-content:space-between; }
.pv-total strong{ font-size:18px; }

.pv-terms{ margin-top:12px; }
.pv-terms-title{ font-weight:700; margin-bottom:4px; }

/* === 6) Guard (no logeado) y utilidades ================================= */
.guard{
  display:flex; align-items:flex-start; justify-content:center;
  min-height:100vh; padding:48px 16px 16px;
}
.guard .card p{ margin:0; }

code{
  background:#0e1217; border:1px solid var(--border);
  padding:2px 6px; border-radius:6px;
}

/* === 7) Historial de cotizaciones (desktop) ============================= */
.collapsible .collapse-header{ display:flex; align-items:center; gap:8px; }
.collapsible .icon-btn{
  margin-left:auto; width:32px; height:32px; display:grid; place-items:center;
  border:1px solid var(--border); border-radius:8px;
  background:#18202a; color:var(--text); cursor:pointer;
}
.collapsible .icon-btn .chev{ transition: transform .18s ease; }
.collapsible .icon-btn[aria-expanded="true"] .chev{ transform: rotate(180deg); }

#hist-body[hidden]{ display:none; }

.hist-toolbar{ margin:10px 0 8px; }
.hist-toolbar input[type="search"]{
  width:100%; background:#0d1217; color:var(--text);
  border:1px solid var(--border); border-radius:10px; padding:10px 12px; outline:none;
}
.hist-toolbar input[type="search"]:focus{
  border-color:var(--focus); box-shadow:0 0 0 3px rgba(125,211,252,.15);
}

.hist-list{
  overflow:auto; max-height:340px;
  border:1px solid var(--border); border-radius:12px;
}

/* Cabecera y filas alineadas (desktop) */
@media (min-width: 781px){
  .hist-head,
  .hist-row{
    display:grid !important;
    grid-template-columns: 1.2fr .6fr .4fr .6fr var(--hist-btn-w) !important; /* Nombre | Fecha | Número | Total | Btn */
    gap:8px !important; align-items:center !important;
  }

  /* Centrado en Fecha, Número y Total */
  .hist-head > :nth-child(2),
  .hist-row  > :nth-child(2),
  .hist-head > :nth-child(3),
  .hist-row  > :nth-child(3),
  .hist-head > :nth-child(4),
  .hist-row  > :nth-child(4){
    text-align:center !important;
    justify-self:center !important;
  }

  /* Columna del botón */
  .hist-head > :nth-child(5),
  .hist-row  > :nth-child(5){ text-align:right !important; }

  .hist-head > *, .hist-row > *{ min-width:0; }
}

/* ==========================================================================
   8) SECCIÓN MÓVIL — Bloque unificado (reemplaza todo lo móvil previo)
   - Editor en “bloques input”
   - Datos comerciales: file + textos + botones centrados
   - Previsualización: centrada, contenida y con márgenes homogéneos
   - Historial en tarjetas
   - Micro-ajustes ≤480 y ≤460
   ========================================================================== */

/* <= 780px --------------------------------------------------------------- */
@media (max-width: 780px){
  :root{ --field-h: 36px; } /* inputs algo más compactos */

  /* --- Grid principal: apilar Datos comerciales (arriba) + Previsualización (abajo) */
  #cotizador-app .grid-2{
    grid-template-columns: 1fr;
    grid-auto-flow: row;
  }
  #cotizador-app .grid-2 > *{ min-width: 0; } /* evita puntos duros de ancho */

  /* =====================
     NUEVA COTIZACIÓN — ÍTEMS
     ===================== */
  .items-head{ display:none; } /* cabecera no aporta en móvil */

  .item-row{
    /* Unit (=2fr) | Qty (=1.2fr) */
    grid-template-columns: 1fr 1fr 1.2fr;
    grid-template-areas:
      "name name name"
      "desc desc desc"
      "unit unit qty"
      "actions sub  tot";
    gap:10px;
    padding:12px;
    border:1px solid var(--border);
    border-radius:12px;
    background:#0d1217;
  }
  .item-row .cell.name   { grid-area:name; }
  .item-row .cell.desc   { grid-area:desc; }
  .item-row .cell.unit   { grid-area:unit; }
  .item-row .cell.qty    { grid-area:qty; }
  .item-row .cell.sub    { grid-area:sub; justify-content:space-between !important; }
  .item-row .cell.tot    { grid-area:tot; justify-content:space-between !important; }
  .item-row .cell.actions{ grid-area:actions; align-self:center; justify-content:flex-start; }

  .item-row .cell.unit input,
  .item-row .cell.qty  input{ min-width:0; }
  .item-row .cell.qty input{ width:100%; text-align:right; }
  .item-row .cell.unit input{ width:100%; }

  /* Etiquetas contextuales (al ocultar la cabecera) */
  .item-row .cell.unit,
  .item-row .cell.qty,
  .item-row .cell.sub,
  .item-row .cell.tot{ gap:8px; }
  .item-row .cell.unit::before{ content:"Precio unit."; color:var(--muted); font-size:12px; line-height:1; }
  .item-row .cell.qty::before { content:"Cant.";        color:var(--muted); font-size:12px; line-height:1; }
  .item-row .cell.sub::before { content:"Subtotal";     color:var(--muted); font-size:12px; line-height:1; }
  .item-row .cell.tot::before { content:"Total c/imp."; color:var(--muted); font-size:12px; line-height:1; }

  /* Botón eliminar en texto (desktop mantiene “✕”) */
  .item-row .btn-row-del{ width:auto; height:var(--field-h); padding:0 12px; background:#18202a; font-size:0; }
  .item-row .btn-row-del::after{ content:"Eliminar"; font-size:14px; line-height:1; }

  /* =====================
     DATOS COMERCIALES — Logo, textos y botones centrados
     ===================== */
  /* fila del logo (si existe clase/atributo) */
  #cotizador-app .grid-2 > :first-child .form-row.logo,
  #cotizador-app .grid-2 > :first-child .form-row[data-field="logo"]{
    display:grid; grid-template-columns:1fr; gap:8px; place-items:center; text-align:center;
  }
  /* fallback: cualquier form-row que contenga el file input */
  #cotizador-app .grid-2 > :first-child .form-row:has(input[type="file"]){
    display:grid; grid-template-columns:1fr; gap:8px; place-items:center; text-align:center;
  }
  /* label “Logo” centrado */
  #cotizador-app .grid-2 > :first-child .form-row:has(input[type="file"]) > label{
    display:block; text-align:center;
  }
  /* input file centrado como botón */
  #cotizador-app .grid-2 > :first-child .form-row input[type="file"]{
    display:block; margin-inline:auto; color:transparent; max-width:100%;
  }
  #cotizador-app .grid-2 > :first-child .form-row input[type="file"]::file-selector-button,
  #cotizador-app .grid-2 > :first-child .form-row input[type="file"]::-webkit-file-upload-button{
    background:#18202a; color:var(--text); border:1px solid var(--border);
    padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:700;
  }
  /* texto “Se guarda en …” centrado y sin desbordes */
  #cotizador-app .grid-2 > :first-child .form-row:has(input[type="file"]) small,
  #cotizador-app .grid-2 > :first-child .form-row:has(input[type="file"]) .help,
  #cotizador-app .grid-2 > :first-child .form-row:has(input[type="file"]) .hint,
  #cotizador-app .grid-2 > :first-child .form-row:has(input[type="file"]) .note{
    display:block; margin:4px auto 0; text-align:center; max-width:100%;
    overflow-wrap:anywhere; word-break:break-word; white-space:normal;
  }
  #cotizador-app .grid-2 > :first-child .form-row:has(input[type="file"]) a{
    overflow-wrap:anywhere; word-break:break-word;
  }
  /* botones centrados (incluye “Guardar datos”) */
  #cotizador-app .grid-2 > :first-child .btn,
  #cotizador-app .grid-2 > :first-child label.btn{
    justify-self:center;
  }
  #cotizador-app .grid-2 > :first-child .btn.primary{ width:min(260px,100%); }

  /* =====================
     PREVISUALIZACIÓN — centrada, contenida y con margen homogéneo
     ===================== */
  .preview{
    display:flex;
    justify-content:center;
    align-items:center;     /* homogeneiza el “aire” arriba/abajo */
    padding-block:14px;     /* mismo margen superior e inferior */
    overflow:hidden;        /* nunca se sale lateralmente */
    min-width:0;
  }
  #quote-preview{
    /* escalado visual + tipografía reducida; el layout NO desborda */
    --pv-scale:.88;
    transform-origin:top center;
    display:block;
    margin-inline:auto;
    width:100%;
    max-width:100%;
    font-size:.90em;
  }

  /* =====================
     HISTORIAL — tarjetas compactas
     ===================== */
  .hist-head{ display:none !important; }
  .hist-row{
    display:grid !important;
    grid-template-columns: 1fr 1fr auto auto !important; /* Fecha | N° | Total | Btn */
    grid-template-areas:
      "name  name   name   name"
      "fecha numero total  accion";
    gap:8px !important; align-items:start !important;
    padding:12px !important;
    border:1px solid var(--border) !important;
    border-radius:12px !important;
    background:#0d1217 !important;
    border-bottom:none !important;
    font-size:.8em;
  }
  .hist-list .hist-row + .hist-row{ margin-top:8px; }
  .hist-row > :nth-child(1){ grid-area:name;   font-weight:700; font-size:1.05em; line-height:1.25; min-width:0; }
  .hist-row > :nth-child(2){ grid-area:fecha;  display:flex; flex-direction:column; gap:2px; min-width:0; }
  .hist-row > :nth-child(3){ grid-area:numero; display:flex; flex-direction:column; gap:2px; min-width:0; }
  .hist-row > :nth-child(4){ grid-area:total;  display:flex; flex-direction:column; gap:2px; text-align:right; min-width:0; }
  .hist-row > :nth-child(5){ grid-area:accion; display:flex; align-items:flex-end; justify-content:flex-end; }

  .hist-row > :nth-child(2)::before{ content:"Fecha"; color:var(--muted); font-size:11px; letter-spacing:.2px; }
  .hist-row > :nth-child(3)::before{ content:"N°";    color:var(--muted); font-size:11px; letter-spacing:.2px; }
  .hist-row > :nth-child(4)::before{ content:"Total"; color:var(--muted); font-size:11px; letter-spacing:.2px; align-self:flex-end; }

  .hist-row .hist-load.btn{
    font-size:.7em !important;
    padding:6px 10px !important;
    border-radius:8px !important;
    min-width:0; white-space:nowrap;
  }
}

/* <= 480px --------------------------------------------------------------- */
@media (max-width: 480px){
  /* Editor un pelín más compacto */
  .item-row{ gap:8px; }
  .item-row .cell.sub,
  .item-row .cell.tot{ font-size:12.5px; }

  /* Previsualización: que el meta colapse y la tabla no impida encoger */
  .pv-header{ grid-template-columns:1fr; gap:10px; }
  .pv-right{ min-width:0 !important; text-align:left; }
  #pv-table{ table-layout:auto; }
  #pv-table col{ width:auto !important; }
  .pv-table{ display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }

  /* Historial: columnas 100% flexibles */
  .hist-row{
    grid-template-columns:
      minmax(0, 1fr)             /* Fecha   */
      minmax(0, 0.8fr)           /* Número  */
      minmax(0, 0.9fr)           /* Total   */
      minmax(72px, max-content)  /* Cargar  */
    !important;
  }
  .hist-row > :nth-child(2),
  .hist-row > :nth-child(3),
  .hist-row > :nth-child(4){
    min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
}

/* <= 460px --------------------------------------------------------------- */
@media (max-width: 460px){
  /* Evita “puntos duros”: última fila del ítem pasa a 1 columna */
  .item-row{
    grid-template-columns:1fr;
    grid-template-areas:
      "name"
      "desc"
      "unit"
      "qty"
      "actions"
      "sub"
      "tot";
  }
  .item-row .btn-row-del{ padding:0 10px; }
  .item-row .cell.sub,
  .item-row .cell.tot{ font-size:12.5px; }
}

/* Afinado de escala/tipografía para pantallas muy angostas (preview) ----- */
@media (max-width: 466px){ #quote-preview{ --pv-scale:.80; font-size:.82em; } }
@media (max-width: 400px){ #quote-preview{ --pv-scale:.74; font-size:.78em; } }
@media (max-width: 360px){ #quote-preview{ --pv-scale:.70; font-size:.74em; } }

/* ===== File input bonito y centrado (sin cambiar HTML) ===== */
#logo-file {
  width: 100%;
  display: block;
  padding: 0;                     /* la altura la define el botón */
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #18202a;
  /* Oculta y colapsa el área del filename */
  color: transparent;             /* por compatibilidad */
  font-size: 0;                   /* colapsa el ancho del filename */
  overflow: hidden;               /* evita que asome nada a la derecha */
}

/* Navegadores modernos */
#logo-file::file-selector-button,
/* Fallback WebKit/Safari antiguos */
#logo-file::-webkit-file-upload-button {
  display: block;
  width: 100%;
  margin: 0;
  border: 0;
  padding: 10px 14px;
  background: #18202a;
  color: var(--text);
  font-size: 14px;                /* restauramos solo en el botón */
  font-weight: 700;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  text-align: center;             /* <-- centra el texto del botón */
}

/* Hover/active a juego con tus .btn */
#logo-file:hover::file-selector-button,
#logo-file:hover::-webkit-file-upload-button {
  filter: brightness(1.08);
}
#logo-file:active::file-selector-button,
#logo-file:active::-webkit-file-upload-button {
  transform: translateY(1px);
}

/* Accesibilidad: foco visible */
#logo-file:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* Botón "Guardar datos" igual que el botón del file input (full width y centrado) */
#btn-save-settings {
  display: block;        /* ocupa toda la línea */
  width: 100%;           /* ancho completo del contenedor */
  margin: 0;             /* sin márgenes laterales que lo desplacen */
  text-align: center;    /* centra el texto */
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
}

/* Si el contenedor usa flex, forzar a que el botón se estire a todo el ancho */
.actions #btn-save-settings {
  flex: 1 1 100%;
}