:root {
    --gold: #ffb400;
    --gold-hover: #ffc93c;
    --dark-1: #1a1a2b;
    --dark-2: #23233a;
    --dark-3: #2b2b45;
    --dark-border: #3a3a55;
    --green: #4cd964;
    --red: #ff3b3b;
  }

  * { -webkit-tap-highlight-color: transparent; }

  html, body { height: 100%; }

  body {
    background: linear-gradient(160deg, #14141f 0%, #1e1e2f 60%, #23233a 100%);
    color: #eaeaea;
    min-height: 100vh;
    padding-bottom: 120px;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    overflow-x: hidden;
  }

  /* ====== HEADER ====== */
  .app-header {
    padding: 18px 12px 8px;
    text-align: center;
  }

  .app-header h1 {
    color: var(--gold);
    letter-spacing: 3px;
    font-weight: 800;
    font-size: clamp(1.3rem, 5vw, 2rem);
    text-shadow: 0 0 14px rgba(255,180,0,0.45);
    margin: 0;
  }

  .app-header .subtitulo {
    color: #8a8aa3;
    font-size: clamp(0.7rem, 2.6vw, 0.85rem);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 4px;
  }

  .header-line {
    width: 80px;
    height: 3px;
    background: var(--gold);
    margin: 10px auto 0;
    border-radius: 3px;
    box-shadow: 0 0 10px var(--gold);
  }

  /* ====== TARJETA MATERIAL ====== */
  .material-card {
    background: linear-gradient(145deg, var(--dark-2), var(--dark-3));
    border: 1px solid var(--dark-border);
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
    animation: fadeIn 0.3s ease;
    transition: border-color 0.2s, transform 0.2s;
  }

  .material-card:hover { border-color: rgba(255,180,0,0.35); }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .material-card .form-label {
    font-size: 0.68rem;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    margin-bottom: 3px;
  }

  .material-card .form-control,
  .material-card .form-control:focus {
    background: var(--dark-1);
    border: 1px solid var(--dark-border);
    color: #fff;
    font-size: 0.9rem;
    padding: 8px 10px;
    transition: border-color 0.2s, box-shadow 0.2s;
  }

  .material-card .form-control:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 0.2rem rgba(255,180,0,0.18);
  }

  .material-card .form-control::placeholder { color: #565674; }

  /* Botón agregar peso (pegado al input) */
  .input-group-peso .btn {
    background: var(--gold);
    color: var(--dark-1);
    font-weight: 800;
    border: none;
    padding: 0 14px;
  }

  .input-group-peso .btn:hover { background: var(--gold-hover); }

  /* Etiquetas de pesos */
  .pesos-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
    min-height: 4px;
  }

  .peso-tag {
    background: rgba(255,180,0,0.15);
    color: var(--gold);
    border: 1px solid rgba(255,180,0,0.45);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    animation: popIn 0.18s ease;
  }

  @keyframes popIn {
    from { transform: scale(0.7); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
  }

  .peso-tag button {
    background: transparent;
    border: none;
    color: var(--gold);
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    padding: 0;
  }

  .peso-tag button:hover { color: #fff; }

  /* Total por material */
  .material-total {
    text-align: right;
    font-size: clamp(0.8rem, 3vw, 0.95rem);
    color: var(--green);
    font-weight: 700;
    border-top: 1px dashed var(--dark-border);
    padding-top: 8px;
    margin-top: 8px;
  }

  .material-total span { color: #8a8aa3; font-weight: 500; }

  /* Cabecera de la tarjeta (índice + eliminar) */
  .material-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
  }

  .material-indice {
    font-size: 0.72rem;
    color: #8a8aa3;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
  }

  /* Grid alineado de campos: Material | Valor | Pesos */
  .material-campos {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.5fr);
    gap: 10px;
    align-items: end;
  }

  .material-campos .campo { min-width: 0; }

  /* Autocompletado de material */
  .autocomplete-wrap { position: relative; }

  .autocomplete-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--dark-1);
    border: 1px solid var(--dark-border);
    border-radius: 8px;
    max-height: 210px;
    overflow-y: auto;
    box-shadow: 0 10px 24px rgba(0,0,0,0.5);
    display: none;
  }

  .autocomplete-list.visible { display: block; }

  .autocomplete-item {
    padding: 8px 10px;
    font-size: 0.85rem;
    color: #dcdce6;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }

  .autocomplete-item:last-child { border-bottom: none; }

  .autocomplete-item:hover,
  .autocomplete-item.activo {
    background: rgba(255,180,0,0.18);
    color: var(--gold);
  }

  /* Botón eliminar */
  .btn-eliminar {
    background: rgba(255,59,59,0.12);
    border: 1px solid rgba(255,59,59,0.45);
    color: #ff6b6b;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 5px 10px;
    line-height: 1;
    transition: all 0.2s;
  }

  .btn-eliminar:hover {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
  }

  /* ====== BOTONES FLOTANTES ====== */
  .btn-flotante {
    position: fixed;
    z-index: 100;
    border: none;
    border-radius: 50px;
    padding: 12px 20px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(0,0,0,0.45);
    font-size: clamp(0.78rem, 2.8vw, 0.9rem);
    transition: transform 0.15s, box-shadow 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
  }

  .btn-flotante:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0,0,0,0.55); }
  .btn-flotante:active { transform: translateY(-1px); }

  #btn-agregar-material {
    bottom: 88px; left: 16px;
    background: var(--gold); color: var(--dark-1);
  }
  #btn-agregar-material:hover { background: var(--gold-hover); }

  #btn-ver-resumen {
    bottom: 24px; left: 16px;
    background: var(--green); color: var(--dark-1);
  }

  #btn-reiniciar {
    bottom: 24px; right: 16px;
    background: var(--red); color: #fff;
  }

  #btn-ver-historial {
    bottom: 88px; right: 16px;
    background: #3a7afe; color: #fff;
  }
  #btn-ver-historial:hover { background: #5b93ff; }

  /* ====== MODAL BOLETA ====== */
  .modal-resumen {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.78);
    z-index: 200;
    justify-content: center;
    align-items: flex-start;
    padding: 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .modal-resumen.visible { display: flex; }

  .boleta {
    background: #ffffff;
    color: #222;
    width: 100%;
    max-width: 520px;
    border-radius: 14px;
    padding: clamp(16px, 5vw, 28px);
    box-shadow: 0 14px 50px rgba(0,0,0,0.6);
    margin: auto;
    animation: slideUp 0.25s ease;
  }

  @keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
  }

  .boleta h2 {
    text-align: center;
    color: var(--dark-1);
    border-bottom: 3px solid var(--gold);
    padding-bottom: 10px;
    margin-bottom: 8px;
    letter-spacing: 3px;
    font-weight: 800;
    font-size: clamp(1.05rem, 4.5vw, 1.35rem);
  }

  .boleta-fecha {
    text-align: center;
    font-size: 0.76rem;
    color: #888;
    margin-bottom: 16px;
  }

  .boleta-nombre-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    background: #f7f7fb;
    border: 1px solid #e3e3ec;
    border-radius: 10px;
    padding: 8px 12px;
  }

  .boleta-nombre-wrap label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--dark-1);
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
  }

  .boleta-nombre {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    color: #1a1a2b;
    font-size: 0.9rem;
    font-weight: 600;
    outline: none;
    padding: 2px 0;
  }

  .boleta-nombre::placeholder { color: #b0b0c0; font-weight: 400; }

  .boleta-items {
    padding: 0;
  }

  .boleta-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid #ececf3;
    font-size: clamp(0.78rem, 3vw, 0.92rem);
  }

  .boleta-item .nombre { font-weight: 700; color: #1a1a2b; word-break: break-word; }
  .boleta-item .detalle { display: block; font-size: 0.72rem; color: #8a8aa3; margin-top: 3px; font-weight: 500; }
  .boleta-item .subtotal { color: #0a7d43; font-weight: 800; white-space: nowrap; }

  .boleta-totales {
    margin-top: 18px;
    border-top: 2px solid var(--dark-1);
    padding-top: 14px;
  }

  .boleta-totales .fila {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 0;
    font-size: clamp(0.85rem, 3.2vw, 1rem);
    color: #666;
  }

  .boleta-totales .fila span:last-child { color: #1a1a2b; font-weight: 700; }

  .boleta-totales .gran-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: clamp(1rem, 4.2vw, 1.2rem);
    font-weight: 800;
    color: var(--dark-1);
    background: rgba(255,180,0,0.16);
    border: 1.5px solid var(--gold);
    border-radius: 12px;
    padding: 12px 16px;
    margin-top: 12px;
  }

  .boleta-totales .gran-total span:last-child { color: #0a7d43; }

  .boleta-acciones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 8px;
    margin-top: 20px;
  }

  .boleta-acciones button {
    padding: 10px 8px;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    color: #fff;
    font-size: clamp(0.72rem, 2.8vw, 0.85rem);
    transition: opacity 0.2s, transform 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }

  .boleta-acciones button:hover { opacity: 0.88; transform: translateY(-2px); }

  .btn-pdf { background: #d93025; }
  .btn-jpg { background: #1a73e8; }
  .btn-png { background: #1a7a3a; }
  .btn-whatsapp { background: #25d366; }
  .btn-cerrar { background: #555; }

  /* ====== MODAL HISTORIAL ====== */
  .historial {
    background: #ffffff;
    color: #222;
    width: 100%;
    max-width: 560px;
    border-radius: 14px;
    padding: clamp(16px, 5vw, 28px);
    box-shadow: 0 14px 50px rgba(0,0,0,0.6);
    margin: auto;
    animation: slideUp 0.25s ease;
  }

  .historial h2 {
    text-align: center;
    color: var(--dark-1);
    border-bottom: 3px solid var(--gold);
    padding-bottom: 10px;
    margin-bottom: 16px;
    letter-spacing: 3px;
    font-weight: 800;
    font-size: clamp(0.95rem, 4vw, 1.2rem);
  }

  .historial-lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 55vh;
    overflow-y: auto;
  }

  .historial-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border: 1px solid #e3e3ec;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
  }

  .historial-item:hover { border-color: var(--gold); background: #fffdf5; }

  .historial-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #1a7a3a;
    margin-top: 2px;
    flex-shrink: 0;
    cursor: pointer;
  }

  .historial-info { flex: 1; min-width: 0; }
  .historial-nombre { font-weight: 800; color: #1a1a2b; font-size: 0.95rem; word-break: break-word; }
  .historial-fecha { font-size: 0.72rem; color: #999; margin-top: 2px; }
  .historial-detalle { font-size: 0.8rem; color: #555; margin-top: 4px; }
  .historial-detalle b { color: #0a7d43; }

  .historial-vacio {
    text-align: center;
    color: #999;
    padding: 30px 10px;
    font-size: 0.9rem;
  }

  .historial-acciones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 8px;
    margin-top: 18px;
  }

  .historial-acciones button {
    padding: 10px 8px;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    color: #fff;
    font-size: clamp(0.72rem, 2.8vw, 0.85rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: opacity 0.2s, transform 0.15s;
  }

  .historial-acciones button:hover { opacity: 0.88; transform: translateY(-2px); }

  .btn-enviar-historial { background: #25d366; }
  .btn-eliminar-sel { background: #d97706; }
  .btn-limpiar-historial { background: var(--red); }
  .btn-cerrar-historial { background: #555; }

  /* ====== SELECTOR COMPARTIR WHATSAPP ====== */
  .compartir {
    background: #ffffff;
    color: #222;
    width: 100%;
    max-width: 380px;
    border-radius: 14px;
    padding: clamp(18px, 5vw, 24px);
    box-shadow: 0 14px 50px rgba(0,0,0,0.6);
    margin: auto;
    text-align: center;
    animation: slideUp 0.25s ease;
  }

  .compartir h3 {
    color: var(--dark-1);
    font-weight: 800;
    font-size: 1.1rem;
    margin: 0 0 4px;
  }

  .compartir p {
    color: #777;
    font-size: 0.85rem;
    margin: 0 0 16px;
  }

  .compartir-opciones {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .compartir-opciones button {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 8px;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.85rem;
    color: #fff;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
  }

  .compartir-opciones button:hover { opacity: 0.9; transform: translateY(-2px); }
  .compartir-opciones button i { font-size: 1.4rem; }

  .compartir-opciones button[data-formato="texto"] { background: #555; }
  .compartir-opciones button[data-formato="pdf"] { background: #d93025; }
  .compartir-opciones button[data-formato="jpg"] { background: #1a73e8; }
  .compartir-opciones button[data-formato="png"] { background: #1a7a3a; }

  .compartir-cancelar {
    margin-top: 16px;
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 8px;
    background: #eee;
    color: #444;
    font-weight: 700;
    cursor: pointer;
  }

  .compartir-cancelar:hover { background: #e0e0e0; }

  /* ====== RESPONSIVE AJUSTES EXTREMOS ====== */
  @media (max-width: 575.98px) {
    .material-campos {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .material-campos .campo-material { grid-column: 1 / -1; }
  }

  @media (max-width: 420px) {
    .btn-flotante { padding: 10px 14px; gap: 5px; }
    #btn-agregar-material { bottom: 78px; left: 10px; }
    #btn-ver-historial { bottom: 78px; right: 10px; }
    #btn-ver-resumen, #btn-reiniciar { bottom: 16px; }
    #btn-ver-resumen { left: 10px; }
    #btn-reiniciar { right: 10px; }
    .material-card { padding: 11px; border-radius: 12px; }
  }

  @media (max-width: 340px) {
    .btn-flotante span.texto-btn { display: none; }
    .btn-flotante { padding: 12px; border-radius: 50%; width: 46px; height: 46px; justify-content: center; }
    #btn-agregar-material { bottom: 74px; }
    .boleta-acciones button span.texto-btn { display: none; }
  }

  /* Scrollbar personalizada */
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track { background: var(--dark-1); }
  ::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--gold); }