/* * Versión: 1.0.0
 * Archivo: assets/css/styles.css
 * Descripción: Estilos globales tema WhatsApp Gold/Black
 */

:root {
    --sf-gold: #D4AF37;
    --sf-gold-dark: #aa8c2c;
    --sf-black: #121212;
    --sf-dark-grey: #1f2c34; /* Fondo WhatsApp Dark */
    --sf-header-bg: #202c33; /* Header WhatsApp Dark */
    --sf-msg-in: #202c33;
    --sf-msg-out: #005c4b; /* Verde oscuro WhatsApp */
    --sf-msg-out-gold: #3e3204; /* Variante Gold para mensajes propios */
    --sf-text-main: #e9edef;
    --sf-text-sec: #8696a0;
}

body {
    background-color: var(--sf-black);
    color: var(--sf-text-main);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin-bottom: 70px; /* Espacio para footer fijo */
}

/* --- Header --- */
.app-header {
    background-color: var(--sf-header-bg);
    padding: 10px 15px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.app-header h1 {
    font-size: 1.25rem;
    color: var(--sf-text-main); /* WhatsApp usa gris claro/blanco */
    margin: 0;
    font-weight: 500;
}
.app-header .brand-gold {
    color: var(--sf-gold);
}

.header-icons i {
    color: var(--sf-text-main);
    margin-left: 20px;
    font-size: 1.2rem;
    cursor: pointer;
}

/* Espaciador para que el contenido no quede oculto por el header */
.main-content {
    margin-top: 60px; 
    padding: 10px;
}

/* --- Footer Navigation (Tipo 1) --- */
.app-footer {
    background-color: var(--sf-header-bg);
    position: fixed;
    bottom: 0;
    width: 100%;
    border-top: 1px solid #333;
    padding: 10px 0 5px 0;
    display: flex;
    justify-content: space-around;
    z-index: 1000;
}

.nav-item {
    text-align: center;
    color: var(--sf-text-sec);
    text-decoration: none;
    font-size: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nav-item i {
    font-size: 1.3rem;
    margin-bottom: 4px;
}

.nav-item.active {
    color: var(--sf-gold);
    font-weight: bold;
}

.nav-item:hover {
    color: var(--sf-text-main);
    text-decoration: none;
}

/* --- Botones --- */
.btn-gold {
    background-color: var(--sf-gold);
    color: var(--sf-black);
    border: none;
    font-weight: 600;
}
.btn-gold:hover {
    background-color: var(--sf-gold-dark);
    color: var(--sf-black);
}
/* --- Botón Borde Dorado (Outline) --- */
.btn-outline-gold {
    color: var(--sf-gold);
    border: 1px solid var(--sf-gold);
    background-color: transparent;
    transition: all 0.2s;
}

.btn-outline-gold:hover {
    background-color: var(--sf-gold);
    color: var(--sf-black);
}

/* Asegurar que el icono dentro herede el color correctamente */
.btn-outline-gold i {
    color: inherit; 
}

/* --- Login Screen --- */
.login-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.login-logo {
    width: 100px;
    height: 100px;
    background-color: var(--sf-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    font-size: 2rem;
    font-weight: bold;
    color: var(--sf-black);
}

.form-control-dark {
    background-color: var(--sf-header-bg);
    border: 1px solid #333;
    color: white;
}
.form-control-dark:focus {
    background-color: var(--sf-header-bg);
    border-color: var(--sf-gold);
    color: white;
    box-shadow: none;
}

/* ... (Mantén el código anterior) ... */

/* --- DASHBOARD STYLES --- */

/* Lista de Tareas (Estilo Chat WhatsApp) */
.task-list-container {
    padding-bottom: 80px; /* Espacio para el footer */
}

.task-card {
    background-color: var(--sf-header-bg); /* Fondo oscuro tipo mensaje */
    border-radius: 10px;
    padding: 10px 15px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: 4px solid var(--sf-gold);
}

.task-card .task-title {
    color: var(--sf-text-main);
    font-weight: 500;
    font-size: 1rem;
}

.task-card .task-details {
    color: var(--sf-text-sec);
    font-size: 0.85rem;
}

/* Botón Flotante (+) */
.fab-container {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.btn-fab {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--sf-gold);
    color: var(--sf-black);
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    border: none;
    transition: transform 0.2s;
}
.btn-fab:active {
    transform: scale(0.95);
}

/* --- MODALES / POPUPS (Estilo Sheet Bottom) --- */
.modal-content-dark {
    background-color: var(--sf-dark-grey);
    color: var(--sf-text-main);
    border: 1px solid #333;
}
.modal-header {
    border-bottom: 1px solid #333;
}
.modal-footer {
    border-top: 1px solid #333;
}

/* Grid de Activos (Iconos redondos) */
.assets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 10px;
    max-height: 300px;
    overflow-y: auto;
    padding: 10px;
}

.asset-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.asset-circle {
    width: 50px;
    height: 50px;
    background-color: #333;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 5px;
    transition: all 0.2s;
    border: 2px solid transparent;
}

.asset-item.selected .asset-circle {
    background-color: #005c4b; /* Verde WhatsApp */
    border-color: var(--sf-gold);
    color: white;
}
.asset-item.selected .asset-circle::after {
    content: '\f00c'; /* FontAwesome Check */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    font-size: 1.5rem;
    color: var(--sf-gold);
    opacity: 0.5;
}

.asset-code {
    font-size: 0.7rem;
    color: var(--sf-text-sec);
}

/* --- PANTALLA ACTIVOS --- */
.assets-menu-grid {
    display: grid;
    gap: 15px;
    margin-top: 20px;
}

.btn-big-menu {
    background-color: var(--sf-header-bg);
    border: 1px solid #333;
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    color: var(--sf-text-main);
    text-decoration: none;
    transition: transform 0.2s, background-color 0.2s;
    display: block;
}
.btn-big-menu:active {
    transform: scale(0.98);
    background-color: #2a3942;
}
.btn-big-menu i {
    font-size: 2.5rem;
    margin-bottom: 10px;
    color: var(--sf-gold);
}
.btn-big-menu span {
    display: block;
    font-size: 1.1rem;
    font-weight: 500;
}

/* --- HISTORIAL HALCÓN (Timeline Style) --- */
.timeline-item {
    border-left: 2px solid var(--sf-gold);
    padding-left: 20px;
    margin-bottom: 20px;
    position: relative;
}
.timeline-item::before {
    content: '';
    width: 12px;
    height: 12px;
    background-color: var(--sf-black);
    border: 2px solid var(--sf-gold);
    border-radius: 50%;
    position: absolute;
    left: -7px;
    top: 5px;
}
.timeline-date {
    font-size: 0.8rem;
    color: var(--sf-gold);
    margin-bottom: 4px;
}

/* ... (Mantén todo el código anterior) ... */

/* =========================================
   CORRECCIONES DE VISIBILIDAD Y CONTRASTE
   ========================================= */

/* 1. Aclarar el texto secundario (text-muted) globalmente */
/* Bootstrap usa un gris muy oscuro por defecto, lo cambiamos a gris perla */
.text-muted {
    color: #b0b3b8 !important; 
}

/* 2. Títulos de Secciones (ej: "TAREAS A REPORTAR HOY") */
/* Los ponemos en Oro para que destaquen sobre el negro */
h6.text-uppercase {
    color: var(--sf-gold) !important;
    font-weight: 600;
    letter-spacing: 0.5px;
    opacity: 1 !important; /* Forzamos opacidad total */
}

/* 3. Mensaje de estado vacío ("Pulsa el botón +...") */
#emptyStateMsg {
    color: var(--sf-text-main) !important; /* Blanco hueso */
    opacity: 0.7;
    font-size: 0.95rem;
}

/* 4. Fecha actual (Badge) */
#currentDate {
    background-color: var(--sf-header-bg) !important; /* Fondo del header */
    color: var(--sf-gold) !important;
    border: 1px solid #333;
}

/* 5. Placeholder de los Inputs (Hacerlos más legibles) */
::placeholder {
    color: #8696a0 !important;
    opacity: 1;
}

/* 6. Textos pequeños dentro de timeline */
.timeline-item .text-muted {
    color: #8696a0 !important; /* Un gris específico para el timeline */
}

/* --- VISTA DE MUDAS (GRID) --- */
.nave-container {
    padding-bottom: 80px;
    max-width: 1200px; /* Un poco más ancho para el pasillo */
    margin: 0 auto;
}
.nave-title {
    color: var(--sf-gold);
    text-align: center;
    border: 2px solid var(--sf-text-main);
    padding: 10px;
    margin-bottom: 20px;
    font-weight: bold;
    text-transform: uppercase;
    background-color: var(--sf-header-bg);
}

/* El bloque reutilizable de la muda */
.muda-card {
    background-color: var(--sf-header-bg);
    border: 1px solid #555;
    margin-bottom: 10px;
    min-height: 120px;
    display: flex;
    flex-direction: row; /* Por defecto: Número a la IZQUIERDA */
    overflow: hidden;
    position: relative;
    transition: transform 0.1s;
    cursor: pointer;
}

.muda-card:active {
    transform: scale(0.98);
    border-color: var(--sf-gold);
}

/* VARIANTE PARA LA DERECHA: Invertimos el orden flex */
.muda-card.right-side {
    flex-direction: row-reverse; /* Número a la DERECHA */
}

.muda-card:active {
    transform: scale(0.98);
    border-color: var(--sf-gold);
}

/* Ajuste del borde para las mudas de la derecha */
.muda-card.right-side .muda-number {
    border-right: none;
    border-left: 1px solid #555;
}

/* Columna del número gigante */
.muda-number {
    width: 50px; /* Un poco más ancho para que quepa "A10" */
    background-color: #2a3942;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem; /* Un pelín más pequeño para códigos largos */
    font-weight: bold;
    color: var(--sf-text-main);
    flex-shrink: 0;
    
    /* Borde por defecto (para mudas izquierdas) */
    border-right: 1px solid #555;
    border-left: none;
}

/* Contenido (Halcones) */
.muda-content {
    flex-grow: 1;
    padding: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 0.75rem; /* Letra pequeña para que quepa */
}

.falcon-entry {
    margin-bottom: 4px;
    border-bottom: 1px dashed #444;
    padding-bottom: 2px;
}
.falcon-entry:last-child {
    border-bottom: none;
}

.falcon-sex {
    font-weight: bold;
    color: var(--sf-gold);
    margin-right: 3px;
}
.falcon-ring {
    color: #fff;
    font-weight: 500;
}
.falcon-name {
    display: block;
    color: var(--sf-text-sec); /* Gris claro */
    font-style: italic;
    margin-left: 15px; /* Indentado */
}
/* =========================================
   ESTILOS PARA TAREAS (tareas.php) v2.1
   ========================================= */

/* --- Selectores de Activos (Mudas) --- */
.group-header {
    cursor: pointer;
    background-color: var(--sf-header-bg); /* #202c33 */
    border-bottom: 1px solid #444;
    color: var(--sf-text-main) !important; /* Blanco hueso */
}
.group-header:hover {
    background-color: #2a3942;
}

/* Corrección para cuando el grupo está desplegado */
.accordion-button:not(.collapsed).group-header {
    background-color: #2a3942 !important; /* Un gris azulado oscuro, apenas más claro que el fondo */
    color: var(--sf-text-main) !important; /* Texto blanco */
    box-shadow: none !important; /* Quita el resplandor azul del foco */
}

/* (Opcional) Asegura que la flecha del acordeón se vea blanca */
.accordion-button:not(.collapsed)::after {
    filter: brightness(0) invert(1);
}

.asset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px;
    padding: 10px;
    background-color: var(--sf-black); /* Fondo negro puro */
}

.asset-item {
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid #444;
    background-color: var(--sf-header-bg);
    color: var(--sf-text-main); /* Texto blanco */
}
.asset-item:hover {
    border-color: #666;
}

/* Estado Seleccionado (Verde WhatsApp) */
.asset-item.selected {
    background-color: #005c4b !important; 
    border-color: var(--sf-gold) !important;
    color: white !important;
}

.asset-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #666;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 5px;
    background-color: var(--sf-black);
}

.asset-item.selected .asset-icon {
    border-color: white;
    background-color: transparent;
}

/* --- Botón Flotante Guardar --- */
.btn-floating-save {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1060;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    display: none; /* Se muestra con JS */
    color: var(--sf-black) !important; /* Texto negro sobre botón dorado */
}

/* --- Tarjetas de Tareas Asignadas --- */
.task-card-assigned {
    background-color: var(--sf-header-bg) !important; /* #202c33 */
    border: none;
    border-left: 4px solid #6c757d; /* Gris por defecto */
}
.task-card-assigned.priority-high {
    border-left-color: #f44336 !important; /* Rojo alerta */
}

/* Corrección de textos dentro de las tarjetas */
.task-card-assigned .card-title {
    color: var(--sf-text-main) !important; /* Título blanco */
}
.task-card-assigned .card-text {
    color: var(--sf-text-sec) !important; /* Descripción gris claro */
}

/* --- Input Groups Oscuros --- */
.input-group-text-dark {
    background-color: #2a3942;
    border-color: #444;
    color: var(--sf-text-main);
}
.form-control-dark-input {
    background-color: var(--sf-black) !important;
    border-color: #444 !important;
    color: var(--sf-text-main) !important;
}
.form-control-dark-input::placeholder {
    color: #667781 !important; /* Gris medio */
}
/* =========================================
   CORRECCIONES DE VISIBILIDAD DE TEXTO
   ========================================= */

/* Definición de la clase text-gold (Fundamental para que se vean las ubicaciones) */
.text-gold {
    color: var(--sf-gold) !important;
}

/* Aclarar textos secundarios para que se lean sobre fondo negro/oscuro */
.text-secondary {
    color: #aebac1 !important; /* Gris claro azulado (estilo WhatsApp) */
}

.text-muted {
    color: #b0b3b8 !important; /* Gris perla claro */
}

/* Ajuste específico para el historial */
#historyListContainer .small {
    font-size: 0.85rem; /* Un pelín más grande para leer mejor */
}

/* Iconos dentro de las tarjetas */
.card-body i {
    opacity: 0.9;
}

/* --- ESTADOS DE MUDAS (Colores de Fondo) --- */
/* Tonos oscuros para mantener legibilidad del texto blanco/dorado */

/* Defecto (Gris Oscuro / Negro App) - Se usa si limpieza > 60 días */
.muda-bg-default {
    background-color: var(--sf-header-bg); 
}
/* Verde Oscuro (Limpio) */
.muda-bg-green {
    background-color: #0b3d33 !important; /* Un verde bosque muy oscuro */
    border-color: #125c4e !important;
}
/* Ambar/Marrón Oscuro (Sin fecha limpieza) */
.muda-bg-amber {
    background-color: #3e3204 !important; /* Dorado muy oscuro */
    border-color: #665207 !important;
}
/* Rojo Oscuro (Incidencia) */
.muda-bg-red {
    background-color: #4a1010 !important; /* Rojo sangre oscuro */
    border-color: #7a1c1c !important;
}

/* --- INDICADOR DE AGUA (Rectángulo) --- */
.water-indicator {
    position: absolute;
    bottom: 0;
    width: 15px;
    height: 15px;
    z-index: 10;
    border-top: 1px solid rgba(255,255,255,0.2);
    border-right: 1px solid rgba(255,255,255,0.2);
}
/* Posición para mudas izquierda: Esquina Inferior DERECHA */
.muda-card:not(.right-side) .water-indicator {
    right: 0;
    border-top-left-radius: 4px;
}
/* Posición para mudas derecha: Esquina Inferior IZQUIERDA */
.muda-card.right-side .water-indicator {
    left: 0;
    border-top-right-radius: 4px;
    border-right: none;
    border-left: 1px solid rgba(255,255,255,0.2);
}

.water-blue { background-color: #00a884; } /* Azul/Verde WhatsApp */
.water-amber { background-color: #ffc107; } /* Amarillo alerta */

/* --- BADGE SUPERIOR (Limpieza/Agua reciente) --- */
.muda-top-badge {
    position: absolute;
    top: 0;
    left: 50px; /* Dejar espacio para el número de muda */
    right: 0;
    background-color: rgba(0,0,0,0.4);
    font-size: 0.65rem;
    color: #fff;
    padding: 1px 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
/* Ajuste para mudas derechas (número está a la derecha) */
.muda-card.right-side .muda-top-badge {
    left: 0;
    right: 50px; 
    justify-content: flex-end;
}

.action-pencil {
    cursor: pointer;
    transition: transform 0.2s, color 0.2s;
}
.action-pencil:hover {
    color: var(--sf-gold) !important;
    transform: scale(1.2);
}
.muda-number.flex-column {
    display: flex;
    flex-direction: column !important;
    justify-content: center;
}


/* --- TEXTO EN MOVIMIENTO (Marquee CSS) --- */
.marquee-container {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    /* Difuminado en los bordes para suavizar la entrada/salida */
    mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    display: flex;
    align-items: center;
}

.marquee-content {
    display: inline-block;
    white-space: nowrap;
    /* Quitamos el padding-left: 100% para que empiece visible */
    animation: marquee 20s linear infinite; /* Tiempo ajustable según velocidad deseada */
}

@keyframes marquee {
    0% { transform: translateX(0); }
    /* Al llegar al -50%, el texto duplicado está exactamente donde empezó el original, creando el bucle invisible */
    100% { transform: translateX(-50%); } 
}

/* Clase para cuando el texto es corto (sin animación) */
.static-content {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 5px;
}