/* /amara/css/styles.css (VERSIÓN FINAL UNIFICADA Y LIMPIA) */

/* ==========================================================================
   1. CONFIGURACIÓN GENERAL Y RESET
   ========================================================================== */
* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
}

html { 
    height: 100%; 
}

body { 
    min-height: 100%; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; 
    background-color: #f4f7f6; 
    color: #333; 
    font-size: 16px; 
}

/* ==========================================================================
   2. LAYOUT Y CONTENEDORES
   ========================================================================== */
body.layout-centered { 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    text-align: center; 
}

body.layout-default { 
    display: block; 
}

.container { 
    width: 95%; 
    max-width: 1200px; 
    margin: 30px auto; 
    padding: 0 15px; 
}

.container.container-narrow { 
    max-width: 450px; 
}

.management-panel, 
.selection-container,
.content-center { 
    background: white; 
    border-radius: 10px; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); 
    padding: 25px; 
    margin-bottom: 20px; 
    text-align: left; 
}

/* ==========================================================================
   3. ELEMENTOS COMUNES
   ========================================================================== */
.logo { 
    display: block; 
    margin: 0 auto 40px auto; 
    max-width: 250px; 
    height: auto; 
}

h1, h2 { 
    color: #2c3e50; 
    margin-bottom: 20px; 
    text-align: center; 
}

.welcome-header { 
    background-color: #fff; 
    padding: 10px 20px; 
    border-radius: 8px; 
    margin-bottom: 25px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    border: 1px solid #eee; 
}

.header-actions { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
}

.header-actions a { 
    text-decoration: none; 
}

.action-icon { 
    height: 32px; 
    width: 32px; 
    transition: transform 0.2s ease; 
}

.action-icon:hover { 
    transform: scale(1.1); 
}



.ad-image {
    width: 100%;
    height: 150px;
    object-fit: cover; /* Esta propiedad es clave y funciona tanto para <img> como para <video> */
}

/* ==========================================================================
   4. BOTONES
   ========================================================================== */
.button-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 15px; 
    margin-bottom: 40px;
}

.options-grid { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 10px; 
}

.btn { 
    display: block; 
    padding: 15px 20px; 
    background-color: #3375bb; 
    color: white; 
    text-decoration: none; 
    font-size: 1rem; 
    border-radius: 5px; 
    text-align: center; 
    border: none; 
    cursor: pointer; 
    transition: background-color 0.3s;
}

.btn:hover { 
    background-color: #205075; 
}

.btn.btn-premium { 
    background-color: #808080; 
}

.option-btn { 
    background: #3375bb; 
    color: white; 
    border: none; 
    padding: 12px 20px; 
    border-radius: 6px; 
    cursor: pointer; 
}

.option-btn:hover { 
    background: #205075; 
}

.option-btn.selected { 
    background: #2ecc71; 
    font-weight: bold; 
}

.btn-submit { 
    width: 100%; 
    padding: 10px; 
    background-color: #0077B6; 
    border: none; 
    color: white; 
    font-weight: bold; 
    cursor: pointer; 
    border-radius: 4px; 
    transition: background-color 0.3s; 
}

.btn-submit:hover { 
    background-color: #205075; 
}


.especial-buttons-container {
    display: flex;
    flex-direction: column; /* Apila los botones verticalmente */
    gap: 10px; /* Espacio entre los botones */
    margin-top: 25px; /* Espacio después de la cuadrícula de iconos */
    margin-bottom: 25px;
}

.btn-especial {
    display: block;
    width: 100%;
    padding: 15px;
    background-color: #c0392b; /* El color rojo que usabas */
    color: white;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    border-radius: 8px;
    box-sizing: border-box;
    transition: background-color 0.2s;
}

.btn-especial:hover {
    background-color: #a5281b; /* Un rojo un poco más oscuro al pasar el ratón */
}

.especial-buttons-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin: 25px 0;
}

/* Estilo base para los botones especiales rectangulares */
.btn-especial {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 15px;
    background-color: #6c757d; /* Gris por defecto */
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
    text-align: center;
    transition: background-color 0.2s, transform 0.2s;
}

.btn-especial:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

/* Iconos dentro de los botones especiales */
.btn-especial .button-icon-especial {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    filter: brightness(0) invert(1); /* Pone los iconos en blanco */
}

/* Colores personalizados que solicitaste */
.btn-especial.btn-especial-rojo {
    background-color: #dc3545; /* Rojo */
}

.btn-especial.btn-especial-amarillo {
    background-color: #ffc107; /* Amarillo */
    color: #000; /* Texto negro para mejor contraste */
}
/* El icono en el botón amarillo necesita ser negro */
.btn-especial.btn-especial-amarillo .button-icon-especial {
    filter: none; 
}

.dashboard-button.btn-rojo {
    background-color: #dc3545; /* Rojo */
    color: white;
}

/* Hacemos que el icono sea blanco en los botones rojos */
.dashboard-button.btn-rojo .button-icon {
    filter: brightness(0) invert(1);
}

.dashboard-button.btn-morado {
    background-color: #6611cc; /* Morado */
    color: white;
}

/* Hacemos que el icono sea blanco en los botones morados */
.dashboard-button.btn-morado .button-icon {
    filter: brightness(0) invert(1);
}



/* ---- DISEÑO RESPONSIVO PARA EL DASHBOARD ---- */

/* Para pantallas de 600px de ancho o más (tablets en vertical y más grandes) */
@media (min-width: 600px) {
    .dashboard-grid {
        /* Cambiamos de 2 a 4 columnas para que los botones sean más pequeños */
        grid-template-columns: repeat(4, 1fr);
        
        /* Opcional pero MUY RECOMENDADO: 
           Limitamos el ancho máximo del contenedor para que no se vea gigante en monitores grandes */
        max-width: 800px;
        
        /* Centramos el contenedor en la pantalla */
        margin-left: auto;
        margin-right: auto;
    }
}

/* Para pantallas de 992px de ancho o más (escritorios y tablets en horizontal) */
@media (min-width: 992px) {
    .dashboard-grid {
        /* Podemos aumentar a 6 columnas si tienes muchos botones y quieres que sean aún más pequeños */
        grid-template-columns: repeat(6, 1fr);
        
        /* Ajustamos el ancho máximo para la nueva cantidad de columnas */
        max-width: 1000px;
    }

    /* Opcional: Hacemos los iconos y el texto un poco más pequeños en pantallas muy grandes */
    .dashboard-button .button-icon {
        height: 35%; /* Ligeramente más pequeño que el 40% de móvil */
    }
    .dashboard-button .button-text {
        font-size: 0.8em; /* Ligeramente más pequeño que el 0.9em de móvil */
    }
}



/* --- Estilos para el Dashboard de Seguridad (PWA) --- */
.portal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 30px;
    margin-bottom: 40px;
}
.action-card {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.07);
    padding: 30px;
    text-align: center;
    text-decoration: none;
    color: #333;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid #eef;
}
.action-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}
.action-card .icon {
    font-size: 3.5rem; /* Ajustaremos esto, ya que no usamos Bootstrap Icons */
    margin-bottom: 15px;
    color: #c0392b; 
    line-height: 1; /* Para alinear mejor los SVG */
}
.action-card h3 {
    margin: 0 0 10px 0;
    font-size: 1.4rem;
    color: #2c3e50;
}
.action-card p {
    font-size: 1rem;
    color: #6c757d;
    line-height: 1.5;
}




/* 1. El contenedor que crea la cuadrícula */
.dashboard-grid {
    display: grid;
    /* CORRECCIÓN CLAVE: El navegador creará tantas columnas como quepan,
       donde cada columna tendrá un tamaño mínimo de 130px y un máximo de 1fr. */
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 20px; /* Aumentamos un poco el espacio para pantallas grandes */
    margin-top: 25px;
    /* El ancho lo controla el .container principal, así que no se necesita max-width aquí */
}

/* 2. El estilo de cada botón individual */
.dashboard-button {
    /* Mantenemos la proporción 3:2 que pediste */
    aspect-ratio: 3 / 2; 
    
    /* El resto de los estilos para centrar el contenido no cambia */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #3375bb;
    color: white;
    border-radius: 12px;
    text-decoration: none;
    padding: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out;
}

/* 2. El estilo de cada botón individual */
.dashboard-button {
    /* AÑADIDO: Cambiamos a una proporción 3:2 (ancho:alto) */
    aspect-ratio: 3 / 2; 
    
    /* El resto de los estilos para centrar el contenido no cambia */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #3375bb;
    color: white;
    border-radius: 12px;
    text-decoration: none;
    padding: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out;
}

/* Efecto al tocar/pulsar el botón */
.dashboard-button:active {
    transform: scale(0.95);
}

/* 3. El estilo para la imagen del icono */
.dashboard-button .button-icon {
    /* Hacemos que la imagen ocupe una parte del botón, ej: 40% de la altura */
    height: 40%;
    /* Aseguramos que la imagen no se deforme */
    object-fit: contain;
    margin-bottom: 8px; /* Espacio entre el icono y el texto */
}

/* 4. El estilo para el texto del botón */
.dashboard-button .button-text {
    font-size: 0.9em; /* Un poco más pequeño para que quepa bien */
    font-weight: bold;
    text-align: center;
    line-height: 1.2;
}


/* Estilos para la tabla de selección de departamentos */
.deptos-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.deptos-table td {
    padding: 5px;
    vertical-align: top;
}

.depto-btn {
    width: 100%;
    padding: 12px 5px;
    font-size: 0.9rem;
    font-weight: bold;
    border-radius: 5px;
    border: 1px solid #ccc; /* Borde gris por defecto */
    cursor: pointer;
    transition: all 0.2s ease;
    
    /* ESTADO POR DEFECTO (Libre / Gris) */
    background-color: #f0f0f0;
    color: #6c757d;
}
.depto-btn:hover {
    opacity: 0.8;
}

/* ===============================================
   == INICIO DE LA CORRECCIÓN CON !important
   =============================================== */

/* Verde (Ocupado por Propietario/Residente) */
.depto-btn.status-ocupado {
    background-color: #28a745 !important;
    color: white !important;
    border-color: #1c7430 !important;
}

/* Azul (Tiene Anfitrión Asignado) */
.depto-btn.status-anfitrion {
    background-color: #007bff !important;
    color: white !important;
    border-color: #0056b3 !important;
}

/* ===============================================
   == FIN DE LA CORRECCIÓN
   =============================================== */

/* Estilo para el botón seleccionado actualmente */
.depto-btn.selected {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(0, 123, 255, 0.5);
    border-color: #0056b3 !important;
    outline: 2px solid #007bff;
}



/* ==========================================================================
   5. MODALES Y FORMULARIOS
   ========================================================================== */
.form-group {
    margin-bottom: 15px;
    text-align: left;
}
label {
    display: block;
    margin-bottom: 5px;
    color: #7f8c8d;
    font-size: 0.95rem;
}
input, select, textarea {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 1rem;
    font-family: inherit;
}
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.6);
}
.modal.is-active {
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-content {
    background-color: #fff;
    padding: 25px;
    border-radius: 8px;
    width: 95%;
    max-width: 600px;
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
    padding-bottom: 15px;
    margin-bottom: 20px;
}
.close-btn {
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    color: #aaa;
}


.form-group-checkbox {
    display: flex;        /* 1. Activa Flexbox */
    align-items: center;  /* 2. Alinea verticalmente los items al centro */
    gap: 10px;            /* 3. Añade un espacio entre el checkbox y el texto */
    text-align: left;     /* Asegura que el texto dentro del label se alinee a la izquierda */
    margin-bottom: 15px;
}

/* Hacemos que el checkbox no ocupe todo el ancho */
.form-group-checkbox input[type="checkbox"] {
    width: auto;          /* 4. Anula el width: 100% de los inputs generales */
    flex-shrink: 0;       /* Evita que el checkbox se encoja */
}

/* La etiqueta ahora es flexible y ocupa el espacio restante */
.form-group-checkbox label {
    margin-bottom: 0;     /* Quitamos el margen inferior que tienen las etiquetas por defecto */
    font-weight: normal;  /* A menudo se ve mejor sin negritas */
    color: #333;           /* Un color un poco más oscuro para mejor legibilidad */
}



@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

.btn-icon.update-available {
    animation: pulse 1.5s infinite;
}





.card-style {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    margin-top: 15px;
    overflow: hidden; /* Importante para que los bordes redondeados funcionen */
}

.miembro-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #e9ecef;
    padding: 8px 15px;
    font-size: 0.9em;
    color: #495057;
}

.btn-remove-miembro {
    background: none;
    border: none;
    color: #dc3545; /* Rojo */
    font-size: 1.8em;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
}

.miembro-body {
    padding: 15px;
}

/* Una rejilla simple de 2 columnas para los campos */
.form-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

@media (max-width: 600px) {
    .form-grid-2col {
        grid-template-columns: 1fr;
    }

/* ==========================================================================
   6. PORTAL DASHBOARD (Avisos, Eventos, etc.)
   ========================================================================== */
.dynamic-section { 
    padding: 40px 0; 
}
.community-grid { 
    display: grid; 
    grid-template-columns: 1fr; 
    gap: 30px; 
}
@media (min-width: 768px) { .community-grid { grid-template-columns: 2fr 1fr; } }

.notice-card { 
    display: flex; 
    align-items: flex-start; 
    background: #fff; 
    border-left: 4px solid #00B4D8; 
    padding: 20px; 
    margin-bottom: 20px; 
    border-radius: 0 5px 5px 0; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); 
}
.notice-thumbnail { 
    width: 120px; 
    height: 90px; 
    object-fit: cover; 
    margin-right: 20px; 
    border-radius: 4px; 
    flex-shrink: 0; 
}
.notice-date { font-size: 0.9em; color: #0077B6; font-weight: bold; margin-bottom: 5px; }
.notice-card h5 { margin-top: 5px; margin-bottom: 10px; }
.notice-footer { margin-top: 15px; padding-top: 10px; border-top: 1px solid #f0f0f0; display: flex; justify-content: flex-end; align-items: center; gap: 15px; }
.vote-btn { background: none; border: none; cursor: pointer; display: flex; align-items: center; gap: 5px; }
.vote-btn svg { width: 20px; height: 20px; fill: #aaa; transition: fill 0.2s; }
.vote-btn.voted-up svg { fill: #28a745; }
.vote-btn.voted-down svg { fill: #dc3545; }
.vote-count { font-weight: bold; font-size: 0.9em; }
.vote-count.positive { color: #28a745; }
.vote-count.negative { color: #dc3545; }

.events-list { border: 1px solid #ddd; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.events-list .card-header { background: #0077B6; color: white; padding: 15px; }
.events-list .card-header h5 { margin: 0; }
.event-item { display: flex; align-items: center; padding: 15px; border-bottom: 1px solid #eee; }
.event-item:last-child { border-bottom: none; }
.event-thumbnail { width: 60px; height: 60px; object-fit: cover; border-radius: 50%; margin-right: 15px; flex-shrink: 0; }
.event-date { background: #00B4D8; color: white; padding: 8px; border-radius: 5px; text-align: center; margin-right: 15px; min-width: 55px; }
.event-date .day { display: block; font-size: 1.4em; font-weight: bold; }
.event-date .month { display: block; font-size: 0.8em; text-transform: uppercase; }

.documents-grid { display: grid; grid-template-columns: 1fr; gap: 30px; }
@media (min-width: 768px) { .documents-grid { grid-template-columns: 1fr 1fr; } }
.documents-card { background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); overflow: hidden; border: 1px solid #eee; }
.documents-card .card-header { background: #f8f9fa; padding: 15px 20px; border-bottom: 1px solid #eee; }
.documents-card .card-header h5 { margin: 0; color: #343a40; }
.document-item { display: flex; align-items: center; padding: 15px 20px; border-bottom: 1px solid #f2f2f2; }
.document-item a { color: #0077B6; text-decoration: none; font-weight: 500; display: flex; align-items: center; }
.document-item svg { width: 20px; height: 20px; margin-right: 12px; color: #0077B6; flex-shrink: 0; }


.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-icon .form-control {
    padding-right: 40px; /* Dejar espacio para el icono */
}

/* Estilos específicos para nuestro icono SVG */
.input-with-icon .edit-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    
    /* Ajusta el tamaño del SVG según tus necesidades */
    width: 20px !important;
    height: 20px !important;
    
    
    z-index: 10;
    opacity: 0.7; /* Una ligera transparencia para que no sea tan agresivo */
    transition: opacity 0.2s;
}

.input-with-icon .edit-icon:hover {
    opacity: 1; /* Opacidad total al pasar el ratón por encima */
}


.category-buttons { 
    display: flex; 
    gap: 10px; 
    margin-bottom: 15px; 
}

.category-buttons .btn {
    /* Propiedades para anular el .btn genérico */
    display: inline-block; 
    width: auto;
    
    /* Propiedades de Flexbox para distribución */
    flex-grow: 1;

    /* Propiedades de estilo específicas de estos botones */
    border: 2px solid transparent; 
    opacity: 0.7; 
}

.category-buttons .btn.selected { 
    opacity: 1; 
    font-weight: bold; 
    transform: scale(1.05); 
    box-shadow: 0 0 10px rgba(0,0,0,0.2); 
}

.date-navigator { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 20px; 
    text-align: center; 
}

.log-entry { 
    border-left: 5px solid #ccc; 
    margin-bottom: 15px; 
    padding: 15px; 
    background: #f9f9f9; 
    border-radius: 0 5px 5px 0; 
}

.log-entry.incidencia { border-color: #e74c3c; }
.log-entry.rondin { border-color: #3498db; }
.log-entry.novedad { border-color: #f1c40f; }

.log-meta { 
    font-size: 0.9em; 
    color: #7f8c8d; 
    margin-bottom: 8px; 
}

.log-meta strong { color: #333; }

.log-description { 
    white-space: pre-wrap; 
    word-wrap: break-word; 
}



.result-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden;
}

.result-header {
    background-color: #f8f9fa;
    padding: 10px 15px;
    font-size: 1.1em;
    border-bottom: 1px solid #ddd;
}

.result-body {
    padding: 15px;
}

.result-body p {
    margin: 0 0 8px 0;
}

.status-badge {
    padding: 3px 8px;
    border-radius: 4px;
    color: white;
    font-size: 0.9em;
    font-weight: bold;
}

.status-badge.propietario { background-color: #27ae60; }
.status-badge.residente { background-color: #2980b9; }
.status-badge.renta-vacacional { background-color: #c0392b; }


.flatpickr-day.pending { 
    background: #f59e0b !important; 
    color: #fff !important; 
    border-color: #f59e0b; 
    cursor: not-allowed; 
}
.flatpickr-day.confirmed { 
    background: #6b7280 !important; 
    color: #d1d5db !important; 
    border-color: #6b7280; 
    cursor: not-allowed; 
}
.calendar-container { 
    max-width: 320px; 
    margin: 20px auto;
}

.calendar-container { 
    margin: 20px 0; 
}
.calendar-month-header { 
    text-align: center; 
    font-size: 1.2em; 
    font-weight: 600; 
    margin-bottom: 15px; 
    text-transform: capitalize; 
}

/* --- INICIO DE LA CORRECCIÓN CLAVE --- */
/* Hacemos el selector más específico para evitar conflictos */
.management-panel .calendar-grid { 
    display: grid !important; 
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 5px !important; 
}



.calendar-header { 
    font-weight: bold; 
    text-align: center; 
    font-size: 0.9em; 
    color: #555; 
    padding-bottom: 5px;
}
.calendar-day { 
    padding: 10px 0; 
    text-align: center; 
    border-radius: 50%; 
    cursor: pointer; 
    transition: background-color 0.2s, color 0.2s; 
    border: 2px solid transparent;
}
.calendar-day:not(.disabled):not(.pending):not(.confirmed):hover { 
    background-color: #eaf5ff; 
}
.calendar-day.selected { 
    background-color: #0077B6; 
    color: white; 
    font-weight: bold; 
}
.calendar-day.disabled { 
    color: #ccc; 
    cursor: not-allowed; 
    text-decoration: line-through; 
}
.calendar-day.pending { 
    background-color: #f59e0b; 
    color: white; 
    cursor: not-allowed; 
}
.calendar-day.confirmed { 
    background-color: #6b7280; 
    color: white; 
    cursor: not-allowed; 
}
.calendar-legend { 
    display: flex; 
    flex-wrap: wrap; /* Añadido para mejor responsive */
    justify-content: center; 
    gap: 15px; /* Reducido el gap */
    margin-bottom: 20px; 
    font-size: 0.9em; 
}
.legend-item { 
    display: flex; 
    align-items: center; 
}
.color-box { 
    width: 15px; 
    height: 15px; 
    border-radius: 3px; 
    margin-right: 8px; 
    border: 1px solid #ccc; 
}
.color-box.available { background-color: white; }
.color-box.pending { background-color: #f59e0b; }
.color-box.confirmed { background-color: #6b7280; }


/* /amara/css/styles.css - Estilos para Gestión de Reservas */

.reserva-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.reserva-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: #f8f9fa;
    border-bottom: 1px solid #ddd;
}
.reserva-body {
    padding: 15px;
}
.reserva-body p {
    margin: 0 0 8px 0;
}
.reserva-footer {
    padding: 10px 15px;
    background: #f8f9fa;
    border-top: 1px solid #ddd;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
.status-badge.status-pending { background-color: #f59e0b; }
.status-badge.status-confirmed { background-color: #27ae60; }
.btn-confirm { background-color: #28a745; }
.btn-reject { background-color: #dc3545; }




.product-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}
.product-card:last-child {
    border-bottom: none;
}
.product-image {
    width: 100px;           /* Establecemos un ancho fijo */
    height: 100px;          /* Y un alto fijo para que todas sean cuadradas */
    object-fit: contain;    /* 'contain' asegura que la imagen completa se vea, sin recortar */
    border-radius: 8px;
    flex-shrink: 0;
    background-color: #f8f9fa; /* Un fondo sutil por si las imágenes no son cuadradas */
}
.product-info {
    flex-grow: 1;
}
.product-info h4 {
    margin: 0 0 5px 0;
}
.product-info p {
    margin: 0;
    font-size: 0.9em;
    color: #555;
}
.product-price {
    font-weight: bold;
    color: #27ae60;
    margin-top: 5px !important;
    min-width: 180px;
}
.product-quantity {
    display: flex;
    align-items: center;
}
.quantity-btn {
    width: 30px;
    height: 30px;
    border: 1px solid #ccc;
    background-color: #f0f0f0;
    font-size: 1.2em;
    cursor: pointer;
}
.quantity-input {
    width: 40px;
    text-align: center;
    border: 1px solid #ccc;
    border-left: none;
    border-right: none;
    height: 30px;
    padding: 0;
}
.order-summary {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    font-size: 1.2em;
    font-weight: bold;
}




.recepcion-form {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.recepcion-form .form-row {
    display: flex;
    align-items: center;
    gap: 10px;
}


/* Hacemos que el input de la pulsera NO crezca automáticamente */
.recepcion-form .form-row input[type="text"] {
    flex-grow: 0; /* No crece */
    flex-shrink: 1; /* Puede encogerse si es necesario */
    width: 150px;   /* Le damos un ancho fijo razonable */
}

/* El label del checkbox ahora tiene más control sobre su espacio */
.recepcion-form .checkbox-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9em;
    color: #555;
    white-space: nowrap; /* Evita que el texto se parta en dos líneas */
}

.btn-small {
    padding: 8px 12px;
    font-size: 0.9em;
    flex-shrink: 0; /* Evita que el botón se encoja */
}



.recepcion-form .form-group-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap; /* <-- PERMITE QUE LOS ELEMENTOS BAJEN A LA SIGUIENTE LÍNEA */
}

/* Hacemos que el input ocupe el espacio disponible */
.recepcion-form input[type="text"] {
    flex-grow: 1; 
}


.pedido-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.pedido-header {
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
    background: #f8f9fa;
    border-bottom: 1px solid #ddd;
}
.pedido-date {
    font-size: 0.9em;
    color: #6c757d;
}
.pedido-body {
    padding: 15px;
}
.pedido-body p {
    margin: 0 0 10px 0;
}
.pedido-body ul {
    margin-top: 5px;
    padding-left: 20px;
}
.pedido-total {
    font-weight: bold;
    font-size: 1.1em;
    margin-top: 10px !important;
}
.pedido-footer {
    padding: 15px;
    background: #f8f9fa;
    border-top: 1px solid #ddd;
}

/* ==========================================================================
   7. PÁGINA DE INFORMACIÓN / PUBLICIDAD
   ========================================================================== */
.info-page-layout { display: grid; gap: 20px; grid-template-columns: 1fr; }
.info-page-header-ad { grid-column: 1 / -1; }
.info-page-side-column { display: flex; flex-direction: column; gap: 20px; }
.info-page-bottom-ads { grid-column: 1 / -1; display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

@media (min-width: 992px) { 
    .info-page-layout { grid-template-columns: 1fr 2fr 1fr; grid-template-areas: "left center right"; }
    .info-page-side-column.left { grid-area: left; }
    .info-page-main-content { grid-area: center; }
    .info-page-side-column.right { grid-area: right; }
}

.ad-card { position: relative; display: block; width: 100%; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.1); background-color: #e9ecef; }
.ad-card:hover { transform: translateY(-5px); transition: transform 0.3s ease; }
.ad-card img, .ad-card video { display: block; width: 100%; height: auto; }
.ad-card .ad-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 25px 15px 15px; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%); color: white; text-align: center; font-weight: 500; pointer-events: none; }
.ad-placeholder { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 150px; color: #6c757d; font-weight: bold; text-align: center; text-decoration: none; border: 2px dashed #ccc; border-radius: 8px; }

.phone-list { list-style: none; padding: 0; margin: 0; }
.phone-list li { display: flex; justify-content: space-between; align-items: center; padding: 15px 5px; border-bottom: 1px solid #f0f0f0; }
.phone-list li:last-child { border-bottom: none; }
.phone-name { font-weight: 500; color: #333; }
.phone-number { font-weight: bold; color: #007bff; text-decoration: none; padding: 8px 15px; background-color: #e7f5ff; border-radius: 50px; transition: background-color 0.2s, color 0.2s; }
.phone-number:hover { background-color: #007bff; color: white; }

/* ==========================================================================
   8. FOOTER
   ========================================================================== */
.main-footer { background: #2B3A42; color: #EAEAEA; padding: 60px 0 20px; margin-top: 40px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; margin-bottom: 40px; }
.footer-col h4 { font-size: 1.2rem; margin-bottom: 20px; color: #FFFFFF; }
.footer-col p, .footer-col a { font-size: 0.95rem; color: #C0C0C0; text-decoration: none; }
.footer-bottom { text-align: center; padding-top: 20px; border-top: 1px solid #444; font-size: 0.9rem; }
.footer-bottom a { color: #FFFFFF; text-decoration: none; }
.footer-bottom a:hover { text-decoration: underline; }
.footer-form .form-group { margin-bottom: 15px; }
.footer-form label { display: block; margin-bottom: 5px; font-size: 0.9em; color: #ccc; }
.footer-form input, .footer-form textarea { width: 100%; padding: 8px; background-color: #4A5C66; border: 1px solid #667985; border-radius: 4px; color: #fff; }
.footer-form input[readonly] { background-color: #3a4a53; cursor: not-allowed; }
.footer-form .btn-submit { background-color: #3375bb; } 
.footer-form .btn-submit:hover { background-color: #205075; }

/* ==========================================================================
   9. RESPONSIVE
   ========================================================================== */
@media (max-width: 600px) {
    .container { padding: 0 10px; margin: 10px auto; }
    body { font-size: 15px; -webkit-text-size-adjust: 100%; }
    input, select, button { font-size: 16px; }
    .button-grid { grid-template-columns: 1fr; }
    .logo { max-width: 200px; margin-bottom: 30px; }
}

/* ==========================================================================
   15. ESTILOS DE LISTAS (Teléfonos, etc.)
   ========================================================================== */
/* ==========================================================================
   16. ESTILOS PARA GALERÍA DE ANUNCIOS SIMPLE
   ========================================================================== */

.ads-gallery {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid #eee;
}

.ads-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.ad-item {
    display: block; /* Para que el enlace <a> ocupe todo el espacio */
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    background-color: #f0f0f0;
    transition: transform 0.3s ease;
}

.ad-item:hover {
    transform: translateY(-5px);
}

.ad-item img,
.ad-item video {
    display: block;
    width: 100%;
    height: 100%;
    /* Usamos 'aspect-ratio' para mantener la proporción cuadrada */
    aspect-ratio: 1 / 1; 
    object-fit: cover; /* Asegura que la imagen/video llene el espacio sin deformarse */
}

/* ==========================================================================
   17. ESTILOS DEL FOOTER PRINCIPAL
   ========================================================================== */

.main-footer { 
    background: #2B3A42; 
    color: #EAEAEA; 
    padding: 60px 0 20px; 
    margin-top: 40px;
}
.footer-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 40px; 
    margin-bottom: 40px; 
}
.footer-col h4 { 
    font-size: 1.2rem; 
    margin-bottom: 20px; 
    color: #FFFFFF; 
    border-bottom: 1px solid #555;
    padding-bottom: 10px;
}
.footer-col p, .footer-col a { 
    font-size: 0.95rem; 
    color: #C0C0C0; 
    text-decoration: none; 
    line-height: 1.6;
}
.footer-bottom { 
    text-align: center; 
    padding-top: 20px; 
    border-top: 1px solid #444; 
    font-size: 0.9rem; 
}
.footer-bottom a { 
    color: #FFFFFF; 
    text-decoration: none; 
}
.footer-bottom a:hover { 
    text-decoration: underline; 
}
.footer-form .form-group { 
    margin-bottom: 15px; 
}
.footer-form label { 
    display: block; 
    margin-bottom: 5px; 
    font-size: 0.9em; 
    color: #ccc; 
}
.footer-form input, .footer-form textarea { 
    width: 100%; 
    padding: 10px; 
    background-color: #4A5C66; 
    border: 1px solid #667985; 
    border-radius: 4px; 
    color: #fff; 
    font-size: 1em; 
}
.footer-form input[readonly] { 
    background-color: #3a4a53; 
    cursor: not-allowed; 
}
.footer-form .btn-submit { 
    width: 100%; 
    padding: 10px; 
    background-color: #0077B6; 
    border: none; 
    color: white; 
    font-weight: bold; 
    cursor: pointer; 
    border-radius: 4px; 
    transition: background-color 0.3s; 
    font-size: 1em;
}
.footer-form .btn-submit:hover { 
    background-color: #205075; 
}