/* --- Generales --- */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #f4f7f9;
    color: #333;
    margin: 0;
    padding: 20px;
    font-size: 14px;
}
.container {
    max-width: 95%;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
h1, h2, h3 {
    color: #2c3e50;
    border-bottom: 2px solid #3498db;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* =========================================== */
/* --- NUEVOS ESTILOS PARA LOGIN Y REGISTRO --- */
/* =========================================== */
.login-body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding: 0;
    margin: 0;
    background-color: #eef2f5;
}
.login-container {
    background: #ffffff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 400px;
    text-align: center;
}
.login-container h2 {
    margin-top: 0;
    margin-bottom: 25px;
    border-bottom: none;
}
.form-group {
    margin-bottom: 20px;
    text-align: left;
}
.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #555;
}
.form-group input {
    width: 100%;
    padding: 12px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
}
.login-container button {
    width: 100%;
    padding: 12px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
}
.login-container button:hover {
    background-color: #2980b9;
}
.register-link {
    text-align: center;
    margin-top: 20px;
    font-size: 0.9em;
}
.register-link a {
    color: #3498db;
    text-decoration: none;
    font-weight: bold;
}
.error {
    color: #e74c3c;
    background: #fadbd8;
    border: 1px solid #f5b7b1;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 20px;
}
.success {
    color: #27ae60;
    background: #d4efdf;
    border: 1px solid #a9dfbf;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 20px;
}

/* =========================================== */
/* --- ESTILOS PARA INDEX.PHP Y ADMIN.PHP --- */
/* =========================================== */
.main-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
.main-header .header-actions { display: flex; gap: 15px; }
.button-link { text-decoration: none; background-color: #3498db; color: white; padding: 10px 15px; border-radius: 4px; transition: background-color 0.3s; cursor: pointer; border: none; font-family: inherit; font-size: 1em; }
.button-link:hover { background-color: #2980b9; }
.reset-button { background-color: #e74c3c; }
.reset-button:hover { background-color: #c0392b; }

#upload-container {
    background-color: #f8f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 25px;
    margin: 25px 0;
}
#upload-container form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
}
#upload-container input[type="text"], #upload-container input[type="file"] {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
}
#upload-container button {
    align-self: flex-start;
    padding: 10px 20px;
    font-weight: bold;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}
.data-table th, .data-table td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
}
.data-table th {
    background-color: #34495e;
    color: white;
}
.data-table tbody tr:nth-child(even) {
    background-color: #f8f9f9;
}
.actions-cell-dashboard {
    display: flex;
    gap: 10px;
}

/* =========================================== */
/* --- ESTILOS PARA INVENTORY.PHP --- */
/* =========================================== */
.print-btn { background-color: #7f8c8d; }
.main-controls { background-color: #f8f9f9; border: 1px solid #e0e0e0; border-radius: 8px; padding: 25px; margin: 25px 0; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.main-controls #search-container { width: 100%; max-width: 700px; text-align: center; }
.main-controls #search-container label { display: block; margin-bottom: 10px; font-weight: bold; font-size: 1.1em; }
.main-controls #searchBox { width: 100%; padding: 15px; font-size: 1.5em; border-radius: 6px; border: 1px solid #ccc; box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); }
.main-controls #inventory-form { display: flex; gap: 15px; align-items: stretch; }
.main-controls #inventory-form input { padding: 12px; font-size: 1.1em; border: 1px solid #ccc; border-radius: 4px; }
.main-controls #inventory-form button { background-color: #27ae60; color: white; border: none; padding: 0 30px; border-radius: 4px; cursor: pointer; font-size: 1.1em; font-weight: bold; }

#stats-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-bottom: 30px; }
.stat { background-color: #ecf0f1; padding: 15px; border-radius: 5px; display: flex; justify-content: space-between; font-size: 1.2em; }
.stat span:last-child { font-weight: bold; }
.shortage { color: #e74c3c; font-weight: bold; }
.surplus { color: #2ecc71; font-weight: bold; }

/* Sistema de Colores para Filas */
.row-not-inventoried { background-color: #FADBD8 !important; }
.row-shortage-partial { background-color: #FEF9E7 !important; }
.row-surplus { background-color: #D5F5E3 !important; }
.row-complete { background-color: #FFFFFF !important; }

/* Estilos de la Tabla (Diseño Compacto) */
.table-wrapper { overflow-x: auto; }
#inventory-table { width: 100%; border-collapse: collapse; margin-top: 20px; table-layout: fixed; }
#inventory-table th, #inventory-table td { border: 1px solid #ddd; padding: 8px 10px; text-align: left; vertical-align: middle; }
#inventory-table th { background-color: #34495e; color: white; position: sticky; top: 0; z-index: 10; }

/* Anchos de columnas */
#inventory-table th:nth-child(1), #inventory-table td:nth-child(1) { width: 12%; } /* Código */
#inventory-table th:nth-child(2), #inventory-table td:nth-child(2) { width: 30%; white-space: normal; } /* Descripción */
#inventory-table th:nth-child(3), #inventory-table td:nth-child(3) { width: 8%; text-align: center;} /* SBX */
#inventory-table th:nth-child(4), #inventory-table td:nth-child(4) { width: 8%; text-align: center;} /* Precio */
#inventory-table th:nth-child(5), #inventory-table td:nth-child(5) { width: 8%; text-align: center;} /* Conteo */
#inventory-table th:nth-child(6), #inventory-table td:nth-child(6) { width: 8%; text-align: center;} /* Diferencia */
#inventory-table th:nth-child(7), #inventory-table td:nth-child(7) { width: 18%; white-space: normal;} /* Notas */
#inventory-table th:nth-child(8), #inventory-table td:nth-child(8) { width: 10%; } /* Acciones */

/* Celdas específicas */
.code-cell { font-family: monospace; font-weight: bold; }
.notes-cell .notes-display { font-size: 0.9em; color: #555; }
td.stock-cell, td.price-cell, td.counted-stock-cell, td.diff-cell { text-align: center; font-weight: bold; }

/* Modo Edicin en la Tabla */
.edit-input-counted { width: 90px; padding: 8px; font-size: 1em; text-align: center; border: 1px solid #3498db; }
.edit-notes-container { display: flex; flex-direction: column; gap: 10px; }
.edit-input-notes { width: 100%; min-height: 40px; box-sizing: border-box; }
.actions-cell button { margin: 2px; }

/* Nuevo Sistema de Etiquetas Clickables */
.tags-display-container, .tags-edit-container { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 5px; }
.tag-badge, .tag-btn { display: inline-block; padding: 4px 10px; border-radius: 15px; font-size: 0.85em; font-weight: bold; cursor: pointer; border: 1px solid transparent; }
.tag-btn { background-color: #ecf0f1; color: #34495e; border-color: #bdc3c7; }
.tag-btn.active { background-color: #3498db; color: white; border-color: #2980b9; font-weight: bold; }
.tag-badge.tag-vencido, .tag-btn.tag-vencido.active { background-color: #c0392b; color: white; }
.tag-badge.tag-traspaso, .tag-btn.tag-traspaso.active { background-color: #2980b9; color: white; }
.tag-badge.tag-en-cedis, .tag-btn.tag-en-cedis.active { background-color: #f39c12; color: white; }
.tag-badge.tag-no-llego, .tag-btn.tag-no-llego.active { background-color: #8e44ad; color: white; }
.tag-badge.tag-dañado, .tag-btn.tag-dañado.active { background-color: #d35400; color: white; }

/* Estilos de Impresión */
@media print {
    @page {
        size: letter portrait;
        margin: 1.5cm;
    }
    body {
        background-color: #ffffff;
        font-size: 7.5pt;
    }
    .main-header, .main-controls, .actions-cell, #stats-container, .data-table .actions-cell-dashboard {
        display: none !important;
    }
    h2 { font-size: 16pt; text-align: center; margin-bottom: 1cm; }
    .container, .table-wrapper {
        box-shadow: none;
        border: none;
        overflow: visible !important;
    }
    #inventory-table, .data-table {
        width: 100%;
        table-layout: fixed;
    }
    #inventory-table th, #inventory-table td, .data-table th, .data-table td {
        padding: 4px;
        white-space: normal;
    }
    .tag-badge, .row-not-inventoried, .row-shortage-partial, .row-surplus {
        -webkit-print-color-adjust: exact;
        color-adjust: exact;
    }
    #inventory-table tbody tr {
        background-color: #ffffff !important;
    }
}

/* =========================================== */
/* --- ESTILOS PARA INVENTARIO DE PAPEL v2 --- */
/* =========================================== */

.paper-config-box.compact form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end; /* CORRECCIÓN: Alinea los elementos por la base */
}
.paper-config-box.compact input[type="text"],
.paper-config-box.compact input[type="number"] {
    padding: 10px;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.paper-config-box.compact input[type="text"] { flex: 3 1 200px; }
.paper-config-box.compact input[type="number"] { flex: 1 1 100px; }
.paper-config-box.compact button { flex: 1 1 120px; padding: 10px; font-weight: bold; }
.paper-config-box.compact .checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 5px;
    border: 1px solid #ccc;
    padding: 9px;
    border-radius: 4px;
    background: white;
    margin-bottom: 1px; /* Pequeño ajuste para la alineación final */
}
.paper-config-box.compact .checkbox-wrapper input[type="checkbox"] {
    transform: scale(1.4);
    margin: 0 5px;
}
.paper-config-box.compact .checkbox-wrapper label {
    margin-bottom: 0; /* Asegura que la etiqueta no empuje el contenedor */
    font-weight: normal;
}
.paper-config-box.compact .checkbox-wrapper input[type="number"] {
    padding: 0;
    border: none;
    width: 100px;
}

/* Rejilla responsive para los bloques */
.responsive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 25px;
    margin-top: 30px;
}
.inventory-block {
    border: 1px solid #bdc3c7;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
}
.inventory-block .block-header {
    background-color: #2c3e50; /* CORRECCIÓN: Fondo más oscuro para mayor contraste */
    color: white;
    padding: 10px 15px;
    border-radius: 8px 8px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.inventory-block .block-header h3 { color: #ffffff; margin: 0; border: none; padding: 0; font-size: 1.1em; }
.inventory-block .remove-block-btn { background-color: #c0392b; color: white; border: none; border-radius: 50%; width: 25px; height: 25px; font-weight: bold; cursor: pointer; line-height: 25px; }
.inventory-block .block-content { padding: 20px; flex-grow: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; text-align: center; }
/* --- REGLA AÑADIDA PARA CORREGIR LA ALINEACIÓN --- */
.inventory-block .block-content > div { display: flex; flex-direction: column; justify-content: space-between; }
.inventory-block .block-content label { font-weight: bold; font-size: 0.9em; color: #555; margin-bottom: 5px; display: block; }
.inventory-block .block-content input { width: 100%; padding: 10px; box-sizing: border-box; text-align: center; font-size: 1.2em; border: 1px solid #ccc; border-radius: 4px; }
.inventory-block .block-actions { padding: 0 20px 20px 20px; text-align: right; }
.inventory-block .block-results { padding: 15px 20px; margin: 0 20px 20px 20px; border-radius: 6px; background: #ecf0f1; display: grid; grid-template-columns: 1fr 1fr; gap: 15px; text-align: center; }
.block-results .result-line span { font-size: 0.9em; color: #555; display: block; }
.block-results .result-line strong { display: block; font-size: 1.4em; margin-top: 5px; }
.block-results .sobrante { color: #27ae60; }
.block-results .faltante { color: #c0392b; }
.block-results .neutral { color: #7f8c8d; }