/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    margin-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
    max-width: 280px;
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .body-content {
        padding: 0;
    }
}
.btn-delicado {
    background-color: #ffffff !important;
    color: #5a6268 !important;
    border: 1px solid #e1b1bc !important; /* Borde rosa/pastel */
    padding: 6px 16px !important; /* Un toque más chico para que entre bien en la grilla */
    border-radius: 20px !important; /* Esto le va a sacar lo cuadrado */
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s ease !important;
    outline: none !important; /* Le saca la línea fea negra al hacer clic */
}

    .btn-delicado:hover {
        background-color: #e1b1bc !important;
        color: #ffffff !important;
        box-shadow: 0 4px 12px rgba(225, 177, 188, 0.4) !important;
        transform: translateY(-1px);
    }
.contenedor-grilla {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #eef2f5;
    margin-bottom: 20px;
}

/* Estilo principal de la Grilla */
.grilla-delicada {
    width: 100%;
    border-collapse: collapse;
    background-color: #ffffff;
    font-size: 14px;
    color: #495057;
}

    /* Encabezados (Th) */
    .grilla-delicada th {
        background-color: #f8f9fa !important; /* Un gris muy limpio y claro */
        color: #6c757d !important; /* Texto gris oscuro sofisticado */
        font-weight: 600;
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: 0.8px;
        padding: 14px 12px !important;
        border-bottom: 2px solid #edf2f7 !important;
        border-top: none !important;
    }

    /* Celdas comunes (Td) */
    .grilla-delicada td {
        padding: 12px !important;
        border-bottom: 1px solid #edf2f7 !important;
        vertical-align: middle;
        border-top: none !important;
    }

    /* Filas alternas (para que se distingan mejor) */
    .grilla-delicada .fila-alterna {
        background-color: #fbfbfb;
    }

    /* Efecto cuando pasás el mouse por encima de una fila */
    .grilla-delicada tr:hover {
        background-color: #f7f9fa;
        transition: background-color 0.2s ease;
    }

    /* Estilo para los links comunes adentro de la grilla (como el 'seleccionar') */
    .grilla-delicada a {
        color: #e1b1bc; /* Combinando con el tono rosa/pastel del botón */
        text-decoration: none;
        font-weight: 500;
    }

        .grilla-delicada a:hover {
            text-decoration: underline;
            color: #c98a96;
        }
.input-animado {
    width: 100%;
    padding: 10px 15px;
    font-size: 14px;
    color: #495057;
    background-color: #ffffff;
    border: 2px solid #ced4da;
    border-radius: 8px;
    outline: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: none;
}

    /* El foco ahora enciende en AZUL */
    .input-animado:focus {
        border-color: #0d6efd; /* Azul vibrante (estilo Bootstrap 5) */
        box-shadow: 0 0 12px rgba(13, 110, 253, 0.5); /* Brillo azulado difuminado */
        transform: scale(1.02);
        background-color: #fff;
    }
.input-linea {
    width: 100%;
    padding: 10px 5px;
    border: none;
    border-bottom: 2px solid #ced4da;
    background: transparent;
    outline: none;
    font-size: 14px;
    transition: all 0.4s ease;
}

    /* La línea se transforma a azul y desplaza el texto */
    .input-linea:focus {
        border-bottom: 2px solid #0d6efd; /* Línea azul */
        padding-left: 12px;
        letter-spacing: 1px;
    }
.select-animado {
    /* 1. Ocupa el 100% del espacio que le asigna su columna de Bootstrap */
    width: 100% !important;
    display: block !important;
    /* 2. Evita que el padding extra ensanche el control hacia afuera */
    box-sizing: border-box !important;
    /* Tu diseño azul hermoso e impecable */
    padding: 10px 40px 10px 15px !important;
    font-size: 14px !important;
    color: #495057 !important;
    background-color: #ffffff !important;
    border: 2px solid #ced4da !important;
    border-radius: 8px !important;
    outline: none !important;
    transition: all 0.3s ease !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236c757d' viewBox='0 0 16 16'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: calc(100% - 15px) center !important;
    cursor: pointer !important;
}

    /* El foco azul se mantiene excelente */
    .select-animado:focus {
        border-color: #0d6efd !important;
        box-shadow: 0 0 12px rgba(13, 110, 253, 0.5) !important;
        background-color: #ffffff !important;
    }
/* Contenedor que le da un fondo gris sutil de fondo a la sección */
.wrapper-grilla-moderna {
    background-color: #fcfdfe;
    padding: 15px;
    border-radius: 16px;
    border: 1px solid #f1f4f8;
}

/* Estilo de la Grilla Moderna */
.grilla-moderna {
    width: 100%;
    border-collapse: separate !important; /* Permite separar las filas */
    border-spacing: 0 8px !important; /* Le da una separación de 8px entre fila y fila */
    background-color: transparent !important;
}

    /* Encabezados flotantes */
    .grilla-moderna th {
        background-color: transparent !important;
        color: #2c3e50 !important; /* Azul oscuro corporativo */
        font-weight: 700;
        font-size: 13px;
        padding: 10px 16px !important;
        border: none !important;
        text-align: left;
    }

    /* Filas como "Tarjetas" (Cards) */
    .grilla-moderna tr {
        background-color: #ffffff;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
        transition: all 0.25s ease;
    }

    /* Celdas con esquinas redondeadas individuales para armar el efecto Card */
    .grilla-moderna td {
        padding: 14px 16px !important;
        border-top: 1px solid #f1f4f8 !important;
        border-bottom: 1px solid #f1f4f8 !important;
        color: #566473;
        font-size: 14px;
    }

        /* Redondeamos solo la primera celda de la izquierda de la fila */
        .grilla-moderna td:first-child {
            border-left: 1px solid #f1f4f8 !important;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
        }

        /* Redondeamos solo la última celda de la derecha de la fila */
        .grilla-moderna td:last-child {
            border-right: 1px solid #f1f4f8 !important;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
        }

    /* EFECTO HOVER IMPACTANTE: La fila se levanta y se ilumina en azul al pasar el mouse */
    .grilla-moderna tr:hover {
        background-color: #ffffff !important;
        box-shadow: 0 6px 18px rgba(13, 110, 253, 0.08) !important; /* Sombra azulada suave */
        transform: translateY(-2px); /* Efecto de levante */
    }

    /* Estilo para los botones o links de acción dentro de esta grilla */
    .grilla-moderna .btn-accion-grilla {
        background-color: #f0f4f9 !important;
        color: #0d6efd !important;
        border: none !important;
        padding: 6px 14px !important;
        border-radius: 6px !important;
        font-weight: 600;
        font-size: 13px;
        transition: all 0.2s ease;
    }

        .grilla-moderna .btn-accion-grilla:hover {
            background-color: #0d6efd !important;
            color: #ffffff !important;
        }
/* Grilla Ejecutiva Minimalista */
.grilla-ejecutiva {
    width: 100%;
    border-collapse: collapse;
    background-color: #ffffff;
    font-size: 14px;
    margin-bottom: 25px;
}

    /* Encabezados con líneas arriba y abajo, sin fondo */
    .grilla-ejecutiva th {
        background-color: #ffffff !important;
        color: #000000 !important; /* Negro puro */
        font-weight: 700;
        padding: 14px 10px !important;
        border-top: 1px solid #1a1a1a !important;
        border-bottom: 2px solid #1a1a1a !important;
        text-align: left;
    }

    /* Celdas con líneas finas abajo */
    .grilla-ejecutiva td {
        padding: 14px 10px !important;
        border-bottom: 1px solid #e0e0e0 !important;
        color: #1c1c1c !important; /* Negro de alta definición */
    }

    /* Resaltado sutil al pasar el mouse */
    .grilla-ejecutiva tr:hover {
        background-color: #fcfcfc;
    }
/* Colores por defecto (Modo Claro) */
:root {
    --background-color: #ffffff;
    --text-color: #333333;
    --card-bg: #f8f9fa;
    --btn-bg: #007bff;
    --btn-text: #ffffff;
}

/* Colores cuando el modo oscuro esté activo */
body.dark-mode {
    --background-color: #121212;
    --text-color: #e0e0e0;
    --card-bg: #1e1e1e;
    --btn-bg: #bb86fc;
    --btn-text: #121212;
}

/* Aplicar las variables a los elementos de tu página */
body {
    background-color: var(--background-color);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease; /* Transición suave */
    font-family: Arial, sans-serif;
}

.tarjeta-info {
    background-color: var(--card-bg);
    padding: 20px;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

.btn-personalizado {
    background-color: var(--btn-bg);
    color: var(--btn-text);
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
/* --- Cuando el modo oscuro esté activo --- */

/* 1. Fondo oscuro para toda la tabla y bordes más sutiles */
body.dark-mode .table {
    color: #e0e0e0 !important;
    background-color: #1e1e1e !important;
    border-color: #333333 !important;
}

    /* 2. El encabezado de la grilla (Th) con un tono un poco más oscuro o llamativo */
    body.dark-mode .table th {
        background-color: #2d2d2d !important;
        color: #bb86fc !important; /* Un color acento (ej: violeta neón o azul claro) */
        border-color: #333333 !important;
    }

    /* 3. Las celdas normales (Td) */
    body.dark-mode .table td {
        background-color: #1e1e1e !important;
        border-color: #333333 !important;
    }

/* 4. Efecto Hover: Que la fila se ilumine sutilmente cuando pasas el mouse */
body.dark-mode .table-hover tbody tr:hover {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
}
.contenedor {
    display: flex;
    gap: 20px;
}

.foto {
    width: 30px;
    height: auto;
}

#gvProduccion {
    flex: 1;
}