/* ---------------------------
   RESET GENERAL
----------------------------*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------------------------
   VARIABLES DE COLOR - PALETA MINIMALISTA
----------------------------*/
:root {
    --color-primary: #6366F1;        /* Indigo suave - Principal */
    --color-secondary: #10B981;      /* Verde esmeralda - Acciones positivas */
    --color-danger: #EF4444;          /* Rojo suave - Eliminar */
    --color-neutral: #6B7280;         /* Gris neutro - Secundario */
    --color-dark: #1F2937;           /* Gris oscuro - Texto principal */
    --color-light: #F9FAFB;           /* Gris muy claro - Fondos */
    --color-border: #E5E7EB;          /* Gris claro - Bordes */
    --color-white: #FFFFFF;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* ---------------------------
   PANTALLA COMPLETA
----------------------------*/
body {
    background: var(--color-light);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    color: var(--color-dark);
    font-size: 16px;
}

/* ---------------------------
   CONTENEDOR PRINCIPAL
----------------------------*/
.contenedor {
    width: 70%;
    max-width: 900px;
    background: var(--color-white);
    padding: 48px 56px;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    animation: fade 0.3s ease-in-out;
    border: 1px solid var(--color-border);
}

/* Animación suave */
@keyframes fade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------------------------
   LOGO
----------------------------*/
.logo-contenedor {
    display: flex;
    justify-content: center;
    margin-bottom: 32px;
}

.logo-use {
    width: 180px;
    opacity: 0.9;
}

/* ---------------------------
   TÍTULOS
----------------------------*/
.titulo-form-add {
    font-size: 26px;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

/* ---------------------------
   FORMULARIOS
----------------------------*/
.fila {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

label {
    font-size: 15px;
    color: var(--color-dark);
    margin-bottom: 8px;
    font-weight: 600;
}

input, select {
    padding: 11px 14px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    font-size: 16px;
    background: var(--color-white);
    transition: all 0.2s ease;
    color: var(--color-dark);
    font-weight: 500;
}

input:focus, select:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* ---------------------------
   BOTONES BASE
----------------------------*/
.btn-grande {
    width: 100%;
    color: var(--color-white);
    padding: 13px 16px;
    border-radius: 6px;
    border: none;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    text-align: center;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.btn-grande:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-grande:active {
    transform: translateY(0);
}

.btn-grande:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-grande:disabled:hover {
    transform: none;
    box-shadow: none;
}

/* COLORES DE BOTONES - PALETA MINIMALISTA */
.btn-buscar {
    background: var(--color-primary);
}

.btn-buscar:hover {
    background: #4F46E5;
}

.btn-anadir {
    background: var(--color-secondary);
}

.btn-anadir:hover {
    background: #059669;
}

.btn-eliminar {
    background: var(--color-danger);
}

.btn-eliminar:hover {
    background: #DC2626;
}

.btn-necesidades {
    background: var(--color-neutral);
}

.btn-necesidades:hover {
    background: #4B5563;
}

/* Botón pequeño (tabla necesidades) */
.btn-pequeno {
    background: var(--color-danger);
    padding: 6px 12px;
    font-size: 13px;
    color: white;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-block;
    font-weight: 600;
}

.btn-pequeno:hover {
    background: #DC2626;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* Botón pequeño para editar */
.btn-pequeno.btn-editar {
    background: #3B82F6 !important; /* Azul */
}

.btn-pequeno.btn-editar:hover {
    background: #2563EB !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* ---------------------------
   SISTEMA DE SEPARACIÓN ENTRE BOTONES
----------------------------*/

/* Para dos botones en fila horizontal */
.fila-botones-dos {
    display: flex;
    gap: 16px;
    margin-top: 24px;
}

/* Para un único botón en fila */
.fila-botones-uno {
    margin-top: 20px;
    margin-bottom: 30px;
}

/* Hacer que ambos botones de la fila tengan el mismo tamaño */
.fila-botones-dos .btn-grande {
    flex: 1;
}

/* Grid de 3 columnas para botones */
[style*="grid-template-columns: repeat(3"] .btn-grande {
    width: 100%;
}

/* ---------------------------
   TABLAS
----------------------------*/
.tabla-necesidades {
    width: 100%;
    border-collapse: collapse;
    margin-top: 24px;
    font-size: 14px;
    background: var(--color-white);
}

.tabla-necesidades th {
    background: var(--color-dark);
    color: var(--color-white);
    padding: 12px;
    font-weight: 600;
    text-align: left;
    font-size: 14px;
    letter-spacing: 0.3px;
}

.tabla-necesidades th.th-sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
}

.tabla-necesidades th.th-sortable:hover {
    background: #374151;
}

.tabla-necesidades th .th-link {
    color: var(--color-white);
    text-decoration: none;
    display: block;
    width: 100%;
}

.tabla-necesidades th .th-link:hover {
    color: var(--color-white);
}

.tabla-necesidades td {
    padding: 12px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-dark);
    font-weight: 500;
}

.tabla-necesidades tr:hover {
    background: var(--color-light);
}

/* Filas que tienen unidades en el palet actual seleccionado */
.tabla-necesidades tr.tiene-en-palet-actual {
    box-shadow: inset 0 0 0 2px #2196f3;
}

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

/* Tabla preparación pedidos: primera fila (cabecera) fija arriba al hacer scroll */
.tabla-preparacion-scroll .tabla-necesidades thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--color-dark);
    color: var(--color-white);
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

/* Modal contenido por palet */
.modal-palets-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}
.modal-palets-ventana {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    max-width: 520px;
    width: 100%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}
.modal-palets-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 18px;
    border-bottom: 1px solid #ddd;
    flex-shrink: 0;
}
.modal-palets-cabecera h4 {
    font-size: 1.15rem;
}
.modal-palets-cerrar {
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #666;
    padding: 0 4px;
}
.modal-palets-cerrar:hover {
    color: #333;
}
.modal-palets-body {
    padding: 18px;
    overflow-y: auto;
    flex: 1;
    min-height: 80px;
}
.modal-palets-pie {
    padding: 12px 18px;
    border-top: 1px solid #ddd;
    flex-shrink: 0;
}

/* ---------------------------
   MENSAJES
----------------------------*/
.mensaje {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0;
    color: #B91C1C;
    font-size: 14px;
    text-align: center;
    padding: 12px;
    background: #FEE2E2;
    border: 1px solid #FCA5A5;
    border-radius: 6px;
    font-weight: 500;
    z-index: 20000;
    min-width: min(680px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
}

.mensaje.error {
    color: var(--color-danger);
    background: #FEF2F2;
}

/* ---------------------------
   ENLACE SALIR
----------------------------*/
.enlace-salir {
    display: block;
    margin-top: 32px;
    text-align: right;
    font-size: 14px;
    color: var(--color-neutral);
    text-decoration: none;
    transition: color 0.2s ease;
    font-weight: 500;
}

.enlace-salir:hover {
    color: var(--color-dark);
}

/* --- BOTÓN PEDIR (usuario pedidos) --- */
.btn-pedir {
    background: #06B6D4;
}

.btn-pedir:hover {
    background: #0891B2;
}

/* ----- BOTÓN INICIAR SESIÓN ----- */
.btn-login {
    background: var(--color-primary);
}

.btn-login:hover {
    background: #4F46E5;
}

/* TARJETA DE RESULTADOS */
.card-resultado {
    margin-top: 24px;
    padding: 20px 24px;
    background: var(--color-white);
    border-radius: 8px;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    width: 100%;
    max-width: 600px;
}

/* FILA INDIVIDUAL */
.fila-r {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
}

/* Quitar línea al final */
.fila-r:last-child {
    border-bottom: none;
}

/* Etiquetas y valores */
.etiqueta {
    font-weight: 600;
    color: var(--color-dark);
    font-size: 14px;
}

.valor {
    color: var(--color-neutral);
    font-weight: 500;
    font-size: 14px;
}

/* Botón guardar en Añadir ubicación */
.btn-guardar {
    background: var(--color-secondary);
}

.btn-guardar:hover {
    background: #059669;
}

.input-bloqueado {
    background-color: var(--color-light) !important; 
    color: var(--color-neutral) !important;
    border: 1px solid var(--color-border) !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

.btn-volver {
    display: inline-block;
    background-color: var(--color-neutral);
    color: var(--color-white);
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    text-decoration: none;
    margin-top: 20px;
    transition: all 0.2s ease;
    font-weight: 600;
}

.btn-volver:hover {
    background-color: #4B5563;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* ---------------------------
   BOTÓN NEGRO (NECESIDADES PEDIDOS)
----------------------------*/
.btn-negro {
    background: var(--color-dark);
    color: var(--color-white);
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 15px;
    border: none;
    text-align: center;
    display: block;
    width: 100%;
    cursor: pointer;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
    letter-spacing: 0.2px;
}

.btn-negro:hover {
    background: #111827;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* ---------------------------
   BOTONES 3D PANEL ADMIN
----------------------------*/
.btn-admin-3d {
    --button_text_color: #382b22;
    --button_border_color: #b18597;
    --button_face_color: #fff0f0;
    --button_base_color: #f9c4d2;
    position: relative;
    display: block;
    width: 100%;
    cursor: pointer;
    outline: none;
    border: 0;
    vertical-align: middle;
    text-decoration: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--button_text_color);
    text-transform: uppercase;
    padding: 0.95em 1.4em;
    background: var(--button_face_color);
    border: 2px solid var(--button_border_color);
    border-radius: 0.75em;
    transform-style: preserve-3d;
    transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1);
}

.btn-admin-3d::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--button_base_color);
    border-radius: inherit;
    box-shadow: 0 0 0 2px var(--button_border_color), 0 0.625em 0 0 var(--button_face_color);
    transform: translate3d(0, 0.75em, -1em);
    transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
}

.btn-admin-3d .button_top {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    color: inherit;
    text-align: center;
    line-height: 1.15;
}

.btn-admin-3d:hover {
    background: var(--button_face_color);
    transform: translate(0, 0.25em);
}

.btn-admin-3d:hover::before {
    box-shadow: 0 0 0 2px var(--button_border_color), 0 0.5em 0 0 var(--button_face_color);
    transform: translate3d(0, 0.5em, -1em);
}

.btn-admin-3d:active {
    background: var(--button_face_color);
    transform: translate(0em, 0.75em);
}

.btn-admin-3d:active::before {
    box-shadow: 0 0 0 2px var(--button_border_color), 0 0 var(--button_face_color);
    transform: translate3d(0, 0, -1em);
}

/* Paletas permitidas (4 colores) */
.btn-paleta-dark {
    --button_border_color: #222831;
    --button_text_color: #393E46;
    --button_base_color: #00ADB5;
    --button_face_color: #EEEEEE;
}

.btn-paleta-green {
    --button_border_color: #091413;
    --button_text_color: #091413;
    --button_base_color: #408A71;
    --button_face_color: #B0E4CC;
}

.btn-paleta-brown {
    --button_border_color: #A98B76;
    --button_text_color: #A98B76;
    --button_base_color: #BFA28C;
    --button_face_color: #F3E4C9;
}

.btn-paleta-cyan {
    --button_border_color: #71C9CE;
    --button_text_color: #71C9CE;
    --button_base_color: #A6E3E9;
    --button_face_color: #E3FDFD;
}

.btn-paleta-lilac {
    --button_border_color: #424874;
    --button_text_color: #424874;
    --button_base_color: #A6B1E1;
    --button_face_color: #F4EEFF;
}

/* Contenedor de la tabla (ya no necesita scroll) */
.tabla-scroll {
    width: 100%;
    margin-top: 24px;
}

/* Tabla optimizada para que NUNCA se salga */
.tabla-logs {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 13px;
    background: var(--color-white);
}

/* Encabezados */
.tabla-logs th {
    background: var(--color-dark);
    color: var(--color-white);
    padding: 10px;
    font-weight: 600;
    text-align: left;
    font-size: 13px;
    letter-spacing: 0.3px;
}

/* Celdas */
.tabla-logs td {
    padding: 10px;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
    word-wrap: break-word;
    white-space: normal;
    color: var(--color-dark);
    font-weight: 500;
}

.tabla-logs tr:hover {
    background: var(--color-light);
}

/* Última fila sin borde */
.tabla-logs tr:last-child td {
    border-bottom: none;
}

/* Opcional: columna detalles más ancha para mejor lectura */
.tabla-logs td:nth-child(5),
.tabla-logs th:nth-child(5) {
    width: 35%;
}

/* Centrar el contenido interno del panel de logs */
.contenedor-logs-interno {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Alinear la tabla sin hacerla demasiado estrecha */
.contenedor-logs-interno .tabla-scroll {
    width: 90%;
    max-width: 900px;
}

/* ---------------------------
   RESPONSIVE DESIGN - TABLETS
----------------------------*/
@media (max-width: 1024px) and (min-width: 769px) {
    .contenedor {
        width: 85%;
        padding: 40px 48px;
    }

    .titulo-form-add {
        font-size: 28px;
    }

    label {
        font-size: 16px;
    }

    input, select {
        padding: 12px 16px;
        font-size: 17px;
    }

    .btn-grande {
        padding: 14px 18px;
        font-size: 17px;
    }
}

/* ---------------------------
   RESPONSIVE DESIGN - MÓVILES
----------------------------*/
@media (max-width: 768px) {
    body {
        padding: 12px;
        font-size: 18px;
    }

    .contenedor {
        width: 100%;
        padding: 28px 24px;
        border-radius: 8px;
    }

    .titulo-form-add {
        font-size: 30px;
        margin-bottom: 16px;
    }

    label {
        font-size: 18px;
        margin-bottom: 12px;
        font-weight: 700;
    }

    input, select {
        padding: 16px 18px;
        font-size: 18px;
        font-weight: 500;
    }

    .btn-grande {
        padding: 18px 20px;
        font-size: 18px;
        font-weight: 700;
    }

    .fila-botones-dos {
        flex-direction: column;
        gap: 12px;
    }

    .tabla-necesidades {
        font-size: 15px;
    }

    .tabla-necesidades th {
        padding: 12px 10px;
        font-size: 15px;
        font-weight: 700;
    }

    .tabla-necesidades td {
        padding: 12px 10px;
        font-size: 15px;
        font-weight: 500;
    }

    .tabla-logs {
        font-size: 13px;
    }

    .tabla-logs th {
        padding: 10px 8px;
        font-size: 13px;
        font-weight: 700;
    }

    .tabla-logs td {
        padding: 10px 8px;
        font-size: 13px;
    }

    .card-resultado {
        padding: 18px 20px;
    }

    .fila-r {
        padding: 14px 0;
    }

    .etiqueta {
        font-size: 16px;
        font-weight: 700;
    }

    .valor {
        font-size: 16px;
        font-weight: 600;
    }

    .mensaje {
        font-size: 16px;
        padding: 14px;
        font-weight: 600;
    }

    .enlace-salir {
        font-size: 16px;
        margin-top: 24px;
        font-weight: 600;
    }

    .btn-volver {
        padding: 14px 24px;
        font-size: 16px;
        font-weight: 700;
    }

    .btn-negro {
        padding: 16px 20px;
        font-size: 18px;
        font-weight: 700;
    }

    .btn-pequeno {
        padding: 8px 14px;
        font-size: 15px;
        font-weight: 700;
    }

    .logo-use {
        width: 160px;
    }
}

@media (max-width: 480px) {
    body {
        padding: 8px;
        font-size: 16px;
    }

    .contenedor {
        padding: 24px 20px;
    }

    .titulo-form-add {
        font-size: 26px;
    }

    label {
        font-size: 17px;
    }

    input, select {
        padding: 15px 17px;
        font-size: 17px;
    }

    .btn-grande {
        padding: 17px 19px;
        font-size: 17px;
    }

    .tabla-necesidades th,
    .tabla-necesidades td {
        padding: 10px 8px;
        font-size: 14px;
    }

    .tabla-logs th,
    .tabla-logs td {
        padding: 8px 6px;
        font-size: 12px;
    }
}