/* ============================================================
   main.css — Estilos globales del sistema "La Super Negra"
   Fuente: Poppins
   Paleta: Azul marino + naranja cálido, fondo neutro claro
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* ---- Variables globales ---- */
:root {

    /* Colores principales */
    --primario:          #1e3a5f;   
    --primario-hover:    #162d4a;
    --primario-suave:    #e8eef6;   

    --acento:            #f97316;   
    --acento-hover:      #ea6a0a;
    --acento-suave:      #fff4ed;

    /* Fondos */
    --fondo-pagina:      #f0f2f5;   
    --fondo-tarjeta:     #ffffff;   
    --fondo-input:       #f8f9fb;   

    /* Texto */
    --texto-principal:   #111827;
    --texto-secundario:  #4b5563;
    --texto-suave:       #9ca3af;
    --texto-inverso:     #ffffff;

    /* Bordes */
    --borde:             #e2e8f0;
    --borde-foco:        #1e3a5f;

    /* Estados */
    --exito:             #16a34a;
    --exito-fondo:       #f0fdf4;
    --error:             #dc2626;
    --error-fondo:       #fef2f2;
    --advertencia:       #d97706;
    --advertencia-fondo: #fffbeb;
    --info:              #0284c7;
    --info-fondo:        #f0f9ff;

    /* Sombras */
    --sombra-xs:  0 1px 2px rgba(0,0,0,0.05);
    --sombra-sm:  0 2px 6px rgba(0,0,0,0.07);
    --sombra-md:  0 4px 16px rgba(0,0,0,0.09);
    --sombra-lg:  0 8px 30px rgba(0,0,0,0.11);

    /* Tipografía */
    --fuente:      'Poppins', sans-serif;
    --texto-xs:    0.72rem;
    --texto-sm:    0.82rem;
    --texto-base:  0.92rem;
    --texto-md:    1rem;
    --texto-lg:    1.15rem;
    --texto-xl:    1.35rem;
    --texto-2xl:   1.6rem;
    --texto-3xl:   2rem;

    /* Espaciado */
    --radio:       6px;
    --radio-lg:    10px;
    --radio-full:  9999px;

    /* Transiciones */
    --transicion:  0.18s ease;
}



*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--fuente);
    font-size: var(--texto-base);
    font-weight: 400;
    color: var(--texto-principal);
    background-color: var(--fondo-pagina);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--primario);
    text-decoration: none;
    transition: color var(--transicion);
}

a:hover {
    color: var(--acento);
}

img {
    max-width: 100%;
    display: block;
}

ul, ol {
    list-style: none;
}



h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.25;
    color: var(--texto-principal);
}

h1 { font-size: var(--texto-3xl); }
h2 { font-size: var(--texto-2xl); }
h3 { font-size: var(--texto-xl);  }
h4 { font-size: var(--texto-lg);  }
h5 { font-size: var(--texto-md);  }
h6 { font-size: var(--texto-base);}

p {
    color: var(--texto-secundario);
    margin-bottom: 0;
}

small {
    font-size: var(--texto-xs);
    color: var(--texto-suave);
}



.form-grupo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

.form-grupo:last-child {
    margin-bottom: 0;
}

.form-label {
    font-size: var(--texto-xs);
    font-weight: 600;
    color: var(--texto-secundario);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.form-input {
    width: 100%;
    background-color: var(--fondo-input);
    border: 1.5px solid var(--borde);
    border-radius: var(--radio);
    color: var(--texto-principal);
    font-family: var(--fuente);
    font-size: var(--texto-base);
    font-weight: 400;
    padding: 10px 14px;
    outline: none;
    transition: border-color var(--transicion), box-shadow var(--transicion);
}

.form-input::placeholder {
    color: var(--texto-suave);
    font-weight: 300;
}

.form-input:focus {
    border-color: var(--borde-foco);
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.08);
}

.form-input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Select */
.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer;
}

/* Textarea */
.form-textarea {
    resize: vertical;
    min-height: 90px;
}


.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: var(--radio);
    cursor: pointer;
    font-family: var(--fuente);
    font-size: var(--texto-sm);
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 10px 20px;
    transition: background-color var(--transicion),
                color var(--transicion),
                box-shadow var(--transicion),
                transform 0.1s;
    white-space: nowrap;
    text-decoration: none;
}

.btn:active {
    transform: scale(0.98);
}

/* Primario */
.btn-primario {
    background-color: var(--primario);
    color: var(--texto-inverso);
}

.btn-primario:hover {
    background-color: var(--primario-hover);
    color: var(--texto-inverso);
    box-shadow: var(--sombra-sm);
}

/* Acento (naranja) */
.btn-acento {
    background-color: var(--acento);
    color: var(--texto-inverso);
}

.btn-acento:hover {
    background-color: var(--acento-hover);
    color: var(--texto-inverso);
    box-shadow: var(--sombra-sm);
}

/* Secundario (borde) */
.btn-secundario {
    background-color: transparent;
    border: 1.5px solid var(--borde);
    color: var(--texto-secundario);
}

.btn-secundario:hover {
    border-color: var(--primario);
    color: var(--primario);
    background-color: var(--primario-suave);
}

/* Peligro */
.btn-peligro {
    background-color: var(--error);
    color: var(--texto-inverso);
}

.btn-peligro:hover {
    background-color: #b91c1c;
    color: var(--texto-inverso);
}

/* Tamaños */
.btn-sm {
    font-size: var(--texto-xs);
    padding: 7px 14px;
}

.btn-lg {
    font-size: var(--texto-md);
    padding: 13px 28px;
}

.btn-bloque {
    width: 100%;
}


.tarjeta {
    background-color: var(--fondo-tarjeta);
    border: 1px solid var(--borde);
    border-radius: var(--radio-lg);
    box-shadow: var(--sombra-sm);
    padding: 28px;
}

.tarjeta-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--borde);
}

.tarjeta-titulo {
    font-size: var(--texto-lg);
    font-weight: 600;
    color: var(--texto-principal);
}


.alerta {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-radius: var(--radio);
    font-size: var(--texto-sm);
    padding: 12px 16px;
    margin-bottom: 20px;
    border-left: 3px solid;
}

.alerta-error {
    background-color: var(--error-fondo);
    border-color: var(--error);
    color: #991b1b;
}

.alerta-exito {
    background-color: var(--exito-fondo);
    border-color: var(--exito);
    color: #15803d;
}

.alerta-advertencia {
    background-color: var(--advertencia-fondo);
    border-color: var(--advertencia);
    color: #92400e;
}

.alerta-info {
    background-color: var(--info-fondo);
    border-color: var(--info);
    color: #075985;
}


.tabla-wrapper {
    overflow-x: auto;
    border-radius: var(--radio);
    border: 1px solid var(--borde);
}

.tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--texto-sm);
}

.tabla thead {
    background-color: var(--fondo-pagina);
}

.tabla th {
    font-weight: 600;
    color: var(--texto-secundario);
    font-size: var(--texto-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 11px 16px;
    text-align: left;
    border-bottom: 1px solid var(--borde);
    white-space: nowrap;
}

.tabla td {
    padding: 12px 16px;
    color: var(--texto-principal);
    border-bottom: 1px solid var(--borde);
    vertical-align: middle;
}

.tabla tbody tr:last-child td {
    border-bottom: none;
}

.tabla tbody tr:hover {
    background-color: var(--primario-suave);
}



.badge {
    display: inline-block;
    border-radius: var(--radio-full);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 3px 10px;
    text-transform: uppercase;
}

.badge-exito      { background-color: var(--exito-fondo);      color: var(--exito);      }
.badge-error      { background-color: var(--error-fondo);      color: var(--error);      }
.badge-advertencia{ background-color: var(--advertencia-fondo);color: var(--advertencia);}
.badge-info       { background-color: var(--info-fondo);       color: var(--info);       }
.badge-neutro     { background-color: var(--fondo-pagina);     color: var(--texto-suave);}



/* Texto */
.text-primario   { color: var(--primario); }
.text-acento     { color: var(--acento); }
.text-suave      { color: var(--texto-suave); }
.text-secundario { color: var(--texto-secundario); }
.text-center     { text-align: center; }
.text-right      { text-align: right; }
.font-bold       { font-weight: 700; }
.font-medium     { font-weight: 500; }
.font-light      { font-weight: 300; }

/* Espaciado */
.mt-1  { margin-top: 4px;  }
.mt-2  { margin-top: 8px;  }
.mt-3  { margin-top: 16px; }
.mt-4  { margin-top: 24px; }
.mt-5  { margin-top: 32px; }
.mb-1  { margin-bottom: 4px;  }
.mb-2  { margin-bottom: 8px;  }
.mb-3  { margin-bottom: 16px; }
.mb-4  { margin-bottom: 24px; }
.mb-5  { margin-bottom: 32px; }

/* Flexbox rápido */
.flex        { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between{ display: flex; align-items: center; justify-content: space-between; }
.gap-1       { gap: 4px;  }
.gap-2       { gap: 8px;  }
.gap-3       { gap: 16px; }

/* Separador */
.separador {
    border: none;
    border-top: 1px solid var(--borde);
    margin: 20px 0;
}

/* Divisor con texto */
.divisor-texto {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--texto-suave);
    font-size: var(--texto-xs);
    margin: 20px 0;
}

.divisor-texto::before,
.divisor-texto::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--borde);
}

/* Ocultar elemento */
.oculto { display: none !important; }



.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--borde);
    border-top-color: var(--primario);
    border-radius: 50%;
    animation: girar 0.7s linear infinite;
    display: inline-block;
}

@keyframes girar {
    to { transform: rotate(360deg); }
}



/* ============================================================
   Estilos adicionales para componentes del sistema
   ============================================================ */

/* ---- Dashboard ---- */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background-color: var(--fondo-tarjeta);
    border: 1.5px solid var(--borde);
    border-radius: var(--radio-lg);
    box-shadow: var(--sombra-sm);
    padding: 18px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    transition: all var(--transicion);
}

.stat-card:hover {
    border-color: var(--acento);
    box-shadow: var(--sombra-md);
    transform: translateY(-2px);
}

.stat-card.alerta {
    border-color: #f97316;
    background-color: #fff4ed;
}

.stat-card.pendiente {
    border-color: #f59e0b;
    background-color: #fffbeb;
}

.stat-icon {
    width: 50px;
    height: 50px;
    border-radius: var(--radio-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    flex-shrink: 0;
}

.stat-icon.productos { background-color: var(--primario); }
.stat-icon.categorias { background-color: #06b6d4; }
.stat-icon.alerta { background-color: #f97316; }
.stat-icon.ventas { background-color: var(--exito); }
.stat-icon.ingresos { background-color: #06b6d4; }
.stat-icon.pedidos { background-color: var(--acento); }
.stat-icon.proveedores { background-color: #8b5cf6; }

.stat-content {
    flex: 1;
}

.stat-label {
    font-size: var(--texto-xs);
    color: var(--texto-suave);
    margin-bottom: 4px;
    text-transform: uppercase;
    font-weight: 600;
}

.stat-valor {
    font-size: var(--texto-2xl);
    font-weight: 700;
    color: var(--texto-principal);
    margin: 0;
}

/* ---- Tabla Contenedor ---- */
.tabla-contenedor {
    overflow-x: auto;
    border-radius: var(--radio-lg);
    border: 1px solid var(--borde);
    background-color: var(--fondo-tarjeta);
}

.tabla {
    width: 100%;
    border-collapse: collapse;
}

.tabla th {
    background-color: var(--fondo-pagina);
    font-weight: 600;
    color: var(--texto-secundario);
    font-size: var(--texto-xs);
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1.5px solid var(--borde);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tabla td {
    padding: 12px 14px;
    color: var(--texto-principal);
    border-bottom: 1px solid var(--borde);
    vertical-align: middle;
}

.tabla tbody tr:hover {
    background-color: var(--primario-suave);
}

.tabla-vacia {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--texto-suave);
    padding: 30px !important;
    font-size: var(--texto-md);
}

/* Estilos de celdas especiales */
.tabla .codigo {
    font-family: 'Courier New', monospace;
    color: var(--primario);
    font-weight: 600;
}

.tabla .precio,
.tabla .precio-destacado {
    color: var(--acento);
    font-weight: 600;
    text-align: right;
}

.tabla .stock {
    font-weight: 600;
}

.tabla .stock.bajo {
    color: #dc2626;
}

.tabla .fecha-pequeña {
    font-size: var(--texto-xs);
    color: var(--texto-suave);
}

.tabla .email-celda {
    font-size: var(--texto-xs);
}

.tabla .acciones-celda {
    display: flex;
    gap: 4px;
}

.tabla .texto-centro {
    text-align: center;
}

.tabla .texto-derecha {
    text-align: right;
}

.tabla .texto-reducido {
    font-size: var(--texto-xs);
    color: var(--texto-suave);
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Badges y Estados ---- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: var(--radio-full);
    font-size: var(--texto-xs);
    font-weight: 600;
    white-space: nowrap;
}

.badge.disponible {
    background-color: var(--exito-fondo);
    color: var(--exito);
}

.badge.agotado {
    background-color: var(--error-fondo);
    color: var(--error);
}

.estado-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radio);
    font-size: var(--texto-xs);
    font-weight: 600;
}

.estado-badge.estado-completada,
.estado-badge.estado-recibido {
    background-color: var(--exito-fondo);
    color: var(--exito);
}

.estado-badge.estado-pendiente {
    background-color: var(--advertencia-fondo);
    color: var(--advertencia);
}

.estado-badge.estado-cancelada {
    background-color: var(--error-fondo);
    color: var(--error);
}

.metodo-pago {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--texto-sm);
    color: var(--texto-principal);
}

/* ---- Tarjetas de Producto ---- */
.producto-card {
    background-color: var(--fondo-tarjeta);
    border: 1.5px solid var(--borde);
    border-radius: var(--radio-lg);
    box-shadow: var(--sombra-sm);
    overflow: hidden;
    transition: all var(--transicion);
}

.producto-card:hover {
    border-color: var(--acento);
    box-shadow: var(--sombra-md);
    transform: translateY(-4px);
}

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

.producto-header h5 {
    margin: 0;
    font-size: var(--texto-md);
    color: var(--texto-principal);
}

.producto-header .precio {
    color: var(--acento);
    font-weight: 700;
    font-size: var(--texto-lg);
}

.producto-body {
    padding: 12px 14px;
}

.producto-body .categoria {
    font-size: var(--texto-xs);
    color: var(--texto-suave);
}

.producto-body .stock-info {
    font-size: var(--texto-sm);
    color: var(--texto-secundario);
}

.producto-footer {
    padding: 12px 14px;
    border-top: 1px solid var(--borde);
}

/* ---- Tarjetas de Proveedor ---- */
.proveedor-card {
    background-color: var(--fondo-tarjeta);
    border: 1.5px solid var(--borde);
    border-radius: var(--radio-lg);
    box-shadow: var(--sombra-sm);
    overflow: hidden;
}

.proveedor-card .card-header {
    padding: 14px;
    border-bottom: 1px solid var(--borde);
}

.proveedor-card .card-header h5 {
    margin: 0;
    color: var(--primario);
}

.proveedor-card .card-body {
    padding: 12px 14px;
}

.proveedor-card .info-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--texto-sm);
    color: var(--texto-principal);
    margin-bottom: 8px;
}

.proveedor-card .info-line i {
    color: var(--acento);
}

.proveedor-card .card-footer {
    padding: 12px 14px;
    border-top: 1px solid var(--borde);
}

/* ---- Resumen de Venta/Pedido ---- */
.venta-resumen,
.pedido-resumen {
    background-color: var(--fondo-tarjeta);
    border: 1px solid var(--borde);
    border-radius: var(--radio-lg);
    padding: 20px;
}

.venta-resumen h4,
.pedido-resumen h4 {
    margin-bottom: 16px;
    color: var(--primario);
}

.resumen-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
    padding: 16px;
    background-color: var(--fondo-pagina);
    border-radius: var(--radio);
}

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.info-item .label {
    font-size: var(--texto-sm);
    color: var(--texto-suave);
    font-weight: 600;
}

.info-item .valor {
    font-size: var(--texto-md);
    color: var(--texto-principal);
    font-weight: 500;
}

/* ---- Timeline de Movimientos ---- */
.timeline {
    margin: 24px 0;
}

.timeline-item {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    padding: 12px;
    background-color: var(--fondo-tarjeta);
    border-left: 3px solid var(--borde);
    border-radius: var(--radio);
}

.timeline-item.movimiento-entrada {
    border-left-color: var(--exito);
}

.timeline-item.movimiento-salida {
    border-left-color: var(--acento);
}

.timeline-marker {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.timeline-marker i {
    color: var(--primario);
}

.timeline-item.movimiento-entrada .timeline-marker i {
    color: var(--exito);
}

.timeline-item.movimiento-salida .timeline-marker i {
    color: var(--acento);
}

.timeline-content h5 {
    margin: 0 0 4px 0;
    font-size: var(--texto-md);
}

.timeline-tipo {
    font-size: var(--texto-sm);
    color: var(--texto-secundario);
    margin: 4px 0;
}

.timeline-fecha {
    font-size: var(--texto-xs);
    color: var(--texto-suave);
    margin: 0;
}

.timeline-vacia {
    text-align: center;
    color: var(--texto-suave);
    padding: 20px;
}

/* ---- Alertas Contenedor ---- */
.alertas-contenedor {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.mt-20 {
    margin-top: 20px;
}

/* ---- Media Queries ---- */
@media (max-width: 768px) {

    .tarjeta {
        padding: 20px;
    }

    .dashboard-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 12px;
    }

    .tabla {
        font-size: 0.8rem;
    }

    .tabla th,
    .tabla td {
        padding: 8px 10px;
    }

    h1 { font-size: var(--texto-2xl); }
    h2 { font-size: var(--texto-xl);  }

    .btn-lg {
        padding: 11px 22px;
    }
}