/* ==========================================================================
   0. Admin Page Reset (SOBRESCRIBE A base.css)
   ========================================================================== */
body.admin-page {
    display: block;
    padding: 40px 20px;
}

/* ==========================================================================
   1. Admin Page Base Layout
   ========================================================================== */
body.admin-page .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px;
    background: #FFFFFF;
    border: 1px solid #D1D5DB;
    box-shadow: var(--shadow-neumorphic);
    border-radius: 12px;
}

.admin-nav {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 2px solid #E5E7EB;
}

.admin-nav .nav-link {
    text-decoration: none;
    color: #374151;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.2s ease-in-out;
}

.admin-nav .nav-link:hover {
    background-color: #F3F4F6;
    color: var(--primary);
}

.admin-nav .nav-link.active {
    background-color: var(--primary);
    color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

body.admin-page .container h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #1F2937;
}

body.admin-page .admin-content {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

body.admin-page .return-button {
    text-align: center;
    margin-top: 30px;
}

/* ==========================================================================
   2. Product Management Section (Forms & Lists)
   ========================================================================== */
#productForm {
    flex-basis: 50%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.product-list {
    flex-basis: 50%;
    background: #FFFFFF;
    border: 1px solid #D1D5DB;
    box-shadow: var(--shadow-neumorphic);
    border-radius: 12px;
    padding: 20px;
}

#productForm .entry {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

#productForm fieldset {
    border: 1px solid #D1D5DB;
    padding: 15px;
    border-radius: 8px;
    margin: 0;
}

#productForm legend {
    font-weight: bold;
    color: var(--primary);
    padding: 0 5px;
}

.product-list h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #1F2937;
    text-align: center;
}

.product-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 600px;
    overflow-y: auto;
}

.product-list ul li {
    display: block;
    padding: 10px;
    margin-bottom: 10px;
    background: #FFFFFF;
    border: 1px solid #D1D5DB;
    box-shadow: var(--shadow-neumorphic);
    border-radius: 8px;
    transition: box-shadow 0.2s ease-in-out;
}

.product-view {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.product-view .product-thumb {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

.product-view span {
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-actions {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
}

.product-actions .btn {
    padding: 6px 12px;
    font-size: 0.8em;
    margin-left: 0;
    box-shadow: none;
}

.btn-action-edit { background-color: var(--primary); }
.btn-action-delete { background-color: #6c757d; }

/* ==========================================================================
   4. Order Management Section
   ========================================================================== */
/* ... (Esta sección no cambia) ... */
.order-list {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 20px;
}
.order-list table {
    width: 100%;
    min-width: 1100px;
    border-collapse: collapse;
}
.order-list th, .order-list td {
    padding: 12px 15px;
    border: 1px solid #ddd;
    text-align: left;
    white-space: nowrap;
}
.order-list th {
    background-color: #f4f4f4;
    font-weight: bold;
    color: #333;
}
.order-list tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}
.status-select {
    padding: 5px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background-color: #fff;
}
.btn-save-status {
    padding: 6px 12px;
    font-size: 0.8em;
    background-color: var(--primary);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.btn-save-status:hover {
    background-color: var(--primary-hover);
}
.btn-save-status:disabled {
    background-color: #6c757d;
    cursor: not-allowed;
}

/* ==========================================================================
   5. Responsive Design
   ========================================================================== */
@media (max-width: 992px) {
    body.admin-page .admin-content,
    .admin-content-columns {
        flex-direction: column;
        gap: 40px;
    }

    #productForm, .product-list {
        flex-basis: auto;
        min-width: 100%;
    }

    .product-list ul {
        max-height: 350px;
    }

    /* Columnas de mensajes se apilan en móvil */
    .message-column {
        flex-basis: auto !important; /* Reseteamos el ancho */
    }
}

/* ==========================================================================
   6. OPTIMIZACIÓN DE TABLA DE ÓRDENES
   ========================================================================== */
/* ... (Esta sección no cambia) ... */
.order-list table {
    --col-width-id:          5%;
    --col-width-cliente:     18%;
    --col-width-contacto:    13%;
    --col-width-direccion:   18%;
    --col-width-ciudad:      15%;
    --col-width-cp:          5%;
    --col-width-total:       12%;
    --col-width-fecha:       10%;
    min-width: 100%;
}
.order-list th, .order-list td {
    white-space: normal;
    word-break: break-word;
}
.order-list th:nth-child(1), .order-list td:nth-child(1) { width: var(--col-width-id); }
.order-list th:nth-child(2), .order-list td:nth-child(2) { width: var(--col-width-cliente); }
.order-list th:nth-child(3), .order-list td:nth-child(3) { width: var(--col-width-contacto); }
.order-list th:nth-child(4), .order-list td:nth-child(4) { width: var(--col-width-direccion); }
.order-list th:nth-child(5), .order-list td:nth-child(5) { width: var(--col-width-ciudad); }
.order-list th:nth-child(6), .order-list td:nth-child(6) { width: var(--col-width-cp); }
.order-list th:nth-child(7), .order-list td:nth-child(7) { width: var(--col-width-total); text-align: right; }
.order-list th:nth-child(8), .order-list td:nth-child(8) { width: var(--col-width-fecha); }

/* ==========================================================================
   7. Estilos para la Gestión de Mensajes del Sitio (NUEVO LAYOUT)
   ========================================================================== */
#message-management {
    margin-bottom: 40px;
    border-bottom: 2px solid #eee;
    padding-bottom: 20px;
}

.admin-content-columns {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.message-column {
    min-width: 0;
    display: flex; /* Hacemos que la columna sea flex para que el textarea crezca */
    flex-direction: column;
}

.message-column h3 {
    margin-top: 0;
    color: var(--primary);
}

/* --- Distribución de anchos para las 3 columnas --- */
.ticker-column { flex-basis: 40%; }
.speed-column { flex-basis: 20%; }
.notification-column { flex-basis: 40%; }
/* ----------------------------------------------- */

.message-list {
    list-style: none;
    padding: 0;
    margin: 0;
    height: 250px; /* Altura fija para alinear verticalmente */
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
}

.message-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    border-bottom: 1px solid #eee;
}
.message-list li:last-child {
    border-bottom: none;
}

.message-list li span {
    flex-grow: 1;
    margin-right: 10px;
}

.message-actions {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
}

.btn-action-edit, .btn-action-delete {
    border: none;
    background: transparent;
    cursor: pointer;
    font-weight: bold;
}
.btn-action-edit { color: var(--primary-hover); }
.btn-action-delete { color: #c81e1e; font-size: 1.2em; }

.message-form {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-grow: 1; /* Permite que el formulario ocupe el espacio restante */
}
.message-form .entry {
    width: 100%;
    max-width: none;
}
.message-form .form-hint {
    font-size: 0.8em;
    color: #666;
    margin: -5px 0 5px 0;
}
/* Hacemos que el textarea ocupe todo el alto posible */
.notification-column .message-form, 
.notification-column #notificationMessage {
    height: 100%;
}
.notification-column #notificationMessage {
    resize: vertical; /* Permite redimensionar solo verticalmente */
    min-height: 150px; /* Una altura mínima para que no sea muy pequeño */
}

/* Ajustes para la columna de velocidad */
.speed-column .entry {
    max-width: 120px;
}
.speed-column .btn {
    align-self: flex-start;
}