:root {
    --azul: #2563eb;
    --azul-osc: #1d4ed8;
    --gris: #f3f4f6;
    --texto: #1f2937;
    --borde: #e5e7eb;
    --rojo: #dc2626;
    --verde: #16a34a;
}

* { box-sizing: border-box; }

body {
    font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--gris);
    color: var(--texto);
    margin: 0;
}

.navbar {
    background: white;
    border-bottom: 1px solid var(--borde);
    padding: 14px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar a { color: var(--azul); text-decoration: none; font-weight: 600; }
.navbar .marca { font-size: 1.2rem; color: var(--texto); }
.navbar .links a { margin-left: 18px; }

.contenedor {
    margin: 30px auto;
    padding: 0 20px;
}

.contenedor-estrecho {
    max-width: 420px;
    margin: 60px auto;
    padding: 0 20px;
}

.card {
    background: white;
    border: 1px solid var(--borde);
    border-radius: 10px;
    padding: 28px;
}

h1, h2, h3 { margin-top: 0; }

label {
    display: block;
    margin: 14px 0 6px;
    font-weight: 600;
    font-size: 0.9rem;
}

input[type=search], input[type=text], input[type=email], input[type=password],
input[type=number], input[type=date], select, textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--borde);
    border-radius: 6px;
    font-size: 0.95rem;
}

input[type=number] {
    text-align: right;
}

.subtotal-item {
    text-align: right;
    background: var(--gris);
    color: #4b5563;
    font-weight: 600;
}

/* Columnas numéricas en tablas (importes, cantidades) */
.num {
    text-align: right;
}

textarea { resize: vertical; }

button, .btn {
    display: inline-block;
    background: var(--azul);
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 6px;
    font-size: 0.95rem;
    cursor: pointer;
    text-decoration: none;
    margin-top: 16px;
}

button:hover, .btn:hover { background: var(--azul-osc); }

.btn-secundario { background: #6b7280; }
.btn-secundario:hover { background: #4b5563; }

.btn-peligro { background: var(--rojo); }
.btn-peligro:hover { background: #b91c1c; }

.btn-sm { padding: 6px 12px; font-size: 0.85rem; margin-top: 0; }

.alerta {
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 0.9rem;
}

.alerta-error { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.alerta-ok { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
}

th, td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--borde);
    font-size: 0.92rem;
}

th { background: #f9fafb; font-weight: 600; }

.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}

.badge-borrador { background: #e5e7eb; color: #374151; }
.badge-enviada { background: #dbeafe; color: #1e40af; }
.badge-aprobada { background: #dcfce7; color: #166534; }
.badge-rechazada { background: #fee2e2; color: #991b1b; }

.fila-item {
    display: grid;
    grid-template-columns: 0.9fr 2.1fr 0.7fr 0.9fr 1.2fr 0.9fr auto;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

.fila-header {
    margin-bottom: 6px;
    align-items: end;
}

.fila-header div {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.grupo-ajuste {
    display: flex;
    gap: 4px;
}

.grupo-ajuste select {
    flex: 0 0 68px;
    padding: 10px 4px;
}

.grupo-ajuste input {
    flex: 1;
    min-width: 0;
}

.input-codigo {
    font-size: 0.85rem;
    color: #4b5563;
}

.combo-producto {
    position: relative;
}

.combo-resultados {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    background: white;
    border: 1px solid var(--borde);
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    max-height: 220px;
    overflow-y: auto;
    margin-top: 4px;
}

/* La columna de "Producto / descripción" quedó angosta al separarse del
   código; dejamos que su desplegable de sugerencias se ensanche más allá
   de esa columna para que el nombre no quede apretado */
.combo-nombre .combo-resultados {
    right: auto;
    width: max-content;
    min-width: 100%;
    max-width: 380px;
}

.combo-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.9rem;
}

.combo-item:hover,
.combo-item-activo {
    background: var(--gris);
}

.combo-item-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.combo-item-nombre {
    white-space: normal;
    word-break: break-word;
}

.combo-item-sku {
    color: #9ca3af;
    font-size: 0.78rem;
}

.combo-item-precio {
    color: #6b7280;
    font-weight: 600;
    white-space: nowrap;
}

.acciones-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.totales {
    margin-top: 20px;
    text-align: right;
}

.totales div { margin: 4px 0; }
.totales .total-final { font-size: 1.3rem; font-weight: 700; color: var(--azul-osc); }

.grilla-marcas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
}

.tarjeta-marca {
    border: 1px solid var(--borde);
    border-radius: 10px;
    padding: 14px;
    text-align: center;
}

.tarjeta-marca-foto {
    width: 100px;
    height: 100px;
    margin: 0 auto 10px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--gris);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tarjeta-marca-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tarjeta-marca-sin-foto {
    font-size: 0.75rem;
    color: #9ca3af;
}

.tarjeta-marca-nombre {
    font-weight: 600;
    margin-bottom: 6px;
    word-break: break-word;
}

.tarjeta-marca-acciones {
    margin-top: 10px;
    display: flex;
    gap: 6px;
    justify-content: center;
}

.tarjeta-producto-foto {
    width: 50px;
    height: 50px;
    margin: 0 auto 10px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--gris);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tarjeta-producto-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tarjeta-producto-sin-foto {
    font-size: 0.75rem;
    color: #9ca3af;
}

/* ============================================================
   Utilidades de grilla (usadas en formularios)
   ============================================================ */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}

/* Tablas: en pantallas chicas se puede hacer scroll horizontal en vez
   de romper el layout */
.tabla-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ============================================================
   Responsive (tablets y celulares)
   ============================================================ */
@media (max-width: 860px) {
    .contenedor {
        margin: 16px auto;
        padding: 0 14px;
    }

    .contenedor-estrecho {
        margin: 24px auto;
        padding: 0 14px;
    }

    .card {
        padding: 18px;
    }

    /* En mobile el campo ya ocupa el ancho completo de la tarjeta,
       así que el desplegable no necesita (ni debe) ensancharse más allá */
    .combo-nombre .combo-resultados {
        width: 100%;
        max-width: 100%;
    }

    .navbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 12px 16px;
    }

    .navbar .links {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 14px;
        width: 100%;
    }

    .acciones-top {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .acciones-top .btn,
    .acciones-top > div {
        width: 100%;
    }

    .acciones-top > div {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .acciones-top a.btn {
        text-align: center;
    }

    .grid-2,
    .grid-3 {
        grid-template-columns: 1fr;
    }

    table {
        font-size: 0.85rem;
    }

    th, td {
        padding: 8px;
    }

    /* iOS hace zoom automático al enfocar inputs con font-size < 16px */
    input[type=text], input[type=email], input[type=password],
    input[type=number], input[type=date], select, textarea {
        font-size: 16px;
    }

    /* Los ítems del presupuesto pasan de grilla horizontal a tarjetas
       apiladas, mostrando de nuevo una etiqueta por campo ya que el
       encabezado común (fila-header) no tiene sentido en una columna */
    .fila-header {
        display: none;
    }

    .fila-item {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 14px;
        border: 1px solid var(--borde);
        border-radius: 8px;
        margin-bottom: 14px;
        align-items: stretch;
    }

    #items-container {
        counter-reset: item-numero;
    }

    .fila-item::before {
        counter-increment: item-numero;
        content: 'Ítem ' counter(item-numero);
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        color: #9ca3af;
    }

    .grupo-ajuste {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .navbar .marca {
        font-size: 1.05rem;
    }

    h1 {
        font-size: 1.4rem;
    }

    .totales {
        text-align: left;
    }

    .grilla-marcas {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    }
}