/* ===============================
   CALCULADORA COSTOS EXCEL — DISEÑO PURO v2
   Solo CSS. Sin cambiar JS ni PHP. Sin agregar/quitar campos.
================================= */

:root{
  --red:#d32f2f; --red-700:#c62828; --red-800:#b71c1c;
  --soft:#fafafb; --soft-2:#f6f7fb;
  --border:#e5e7eb; --border-2:#e2e8f0;
  --text:#0f172a; --muted:#64748b;
  --green:#d9f99d; --focus:rgba(211,47,47,.12);
  --card:#ffffff; --shadow:0 10px 26px rgba(2,6,23,.08);
}

.cex-wrapper{
  max-width: 1120px;
  margin: 32px auto;
  padding: 26px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
}
.cex-wrapper h2{
  margin: 0 0 8px 0;
  text-align: center;
  color: var(--red-800);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: .4px;
  text-transform: uppercase;
}
.cex-subtitle{ text-align:center; color: var(--muted); font-size: 12px; margin-bottom: 16px; }

/* Si tu markup tiene contenedores para costos/tabla/resumen, este estilo mejora sin cambiar estructura */
.inputs-totales{
  display:grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
@media (max-width: 640px){ .inputs-totales{ grid-template-columns: 1fr; } }
.inputs-totales label{
  display:flex; flex-direction: column; gap:6px;
  font-size:12px; font-weight:800; text-transform: uppercase; color: var(--text);
}
.inputs-totales input{
  padding:12px 14px; border:1px solid var(--border-2); border-radius: 12px; background:#fff;
  transition: background .2s, border-color .2s, box-shadow .2s, transform .06s ease;
}
.inputs-totales input:focus{ outline:none; border-color: var(--red-700); box-shadow: 0 0 0 4px var(--focus); }
input.editing{ background: var(--green) !important; }

/* Tabla ítems */
#items-table{
  width:100%; border-collapse: separate; border-spacing:0; background:#fff;
  border:1px solid var(--border-2); border-radius:14px; overflow:hidden; margin-top: 12px;
}
#items-table th{ background: linear-gradient(0deg, #ffe8e8, #fff1f2); color: var(--red-800);
  font-weight:900; text-transform: uppercase; font-size:12px; letter-spacing:.35px; padding:12px 10px;
  border-bottom:1px solid var(--border);
}
#items-table td{ padding:10px 10px; border-bottom:1px solid var(--border); vertical-align: middle; }
#items-table tr:last-child td{ border-bottom:none; }
#items-table input[type="number"], #items-table input[type="text"]{
  width:100%; padding:10px 12px; border:1px solid var(--border-2); border-radius:10px; background:#fff;
  transition: background .2s, border-color .2s, box-shadow .2s;
}
#items-table input:focus{ outline:none; border-color: var(--red-700); box-shadow: 0 0 0 4px var(--focus); }

/* Botones */
#add-item, .remove-item{
  appearance:none; border:1px solid var(--red-700);
  background: linear-gradient(180deg, var(--red-700), var(--red-800)); color:#fff;
  padding:12px 16px; font-weight:900; border-radius: 999px; cursor:pointer;
  transition: transform .06s ease, filter .2s ease;
}
#add-item:hover, .remove-item:hover{ transform: translateY(-1px); filter: brightness(1.02); }
.remove-item{ background:#fff; color: var(--red-700); border-color: var(--red-700); }
.remove-item:hover{ background:#fff4f4; }

/* Caja de resultados si existe #resultados */
#resultados{
  background:#fff; border:1px solid var(--border-2); border-radius: 16px; padding: 14px;
  box-shadow: var(--shadow);
}
#resultados p{ margin: 0; display:flex; align-items:center; justify-content: space-between; font-size: 1.06em; color: var(--text); }
#resultados p span{ display:flex; align-items:center; gap:8px; color: var(--muted); font-weight:700; }
#resultados p strong{ letter-spacing:.3px; }
#resultados p:last-of-type strong{ font-size:1.15em; font-weight:900; color: var(--red-800); }

/* Bordes suaves utilitarios */
.hr-soft{ height:1px; background: var(--border); border:none; margin: 12px 0; }




@media print {
  body * { visibility: hidden !important; }
  .cex-wrapper, .cex-wrapper * { visibility: visible !important; }
  .cex-wrapper {
    position: relative !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 820px !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  .no-print, .no-print * { display: none !important; visibility: hidden !important; }
}
@page { size: A4; margin: 12mm; }

/* Botón PDF */
.btn.btn-pdf{
  border: 1px solid var(--red);
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
}
.btn.btn-pdf:hover{ filter: brightness(0.95); }






/* === PRINT (Robusto): solo la calculadora, centrada === */
@media print {
  html, body { background: #ffffff !important; margin: 0 !important; padding: 0 !important; }
  body * { visibility: hidden !important; }
  .cex-wrapper, .cex-wrapper * { visibility: visible !important; }
  .cex-wrapper {
    position: static !important;
    margin: 0 auto !important;
    max-width: 800px !important;
    width: auto !important;
    background: #ffffff !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  .no-print, .no-print * { display: none !important; visibility: hidden !important; }
}
@page { size: A4; margin: 12mm; }



/* === PRINT (A4 ancho útil, centrado y legible) === */
@page { size: A4; margin: 8mm; }

@media print {
  html, body { background: #ffffff !important; margin: 0 !important; padding: 0 !important; }
  body * { visibility: hidden !important; }
  .cex-wrapper, .cex-wrapper * { visibility: visible !important; }
  .cex-wrapper {
    position: static !important;
    width: 190mm !important;   /* ocupa casi todo el A4 (210mm - márgenes) */
    max-width: none !important;
    margin: 0 auto !important;
    background: #ffffff !important;
    box-shadow: none !important;
    padding: 0 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
    font-size: 12pt !important;  /* texto más grande */
    line-height: 1.25 !important;
  }
  /* Evitar cortes feos */
  .cex-wrapper .card,
  .cex-wrapper .items-table,
  .cex-wrapper table,
  .cex-wrapper .inputs-totales,
  .cex-wrapper .header,
  .cex-wrapper .footer {
    break-inside: avoid-page !important;
    page-break-inside: avoid !important;
  }
  /* Quitar elementos de pantalla */
  .no-print, .no-print * { display: none !important; visibility: hidden !important; }
}


/* === PRINT STYLES === */
@media print {
  body{
    background:#fff;
  }
  .cex-wrapper{
    max-width: 900px;
    margin: 0 auto;
    box-shadow:none;
    border:none;
  }
  .cex-wrapper button,
  .no-print{
    display:none !important;
  }
  table{
    width:100% !important;
    border-collapse:collapse;
  }
  th,td{
    border:1px solid var(--border);
    padding:6px 8px;
  }
  h2{
    font-size:20px;
    margin-bottom:12px;
    color:#000;
  }
}