:root{
    --azul-oscuro:#2c3e50;
    --rojo:#e74c3c;
    --amarillo:#f1c40f;
    --verde:#2ecc71;
    --verde-oscuro:#27ae60;
    --fondo:#f4f6f8;
    --tarjeta-bg:#ffffff;
    --texto-secundario:#666;
}

body{
font-family:Arial;
background:var(--fondo);
margin:0;
padding:20px;
transition: background 0.3s, color 0.3s;
}

h1{
text-align:center;
margin-bottom:30px;
}

svg{
vertical-align:middle;
margin-right:3px;
flex-shrink:0;
}

#buscador{
display:block;
margin:auto;
padding:10px;
width:250px;
font-size:16px;
margin-bottom:30px;
}

.contenedor{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:20px;
}

.cargando, .vacio{
grid-column:1/-1;
text-align:center;
padding:60px 20px;
color:var(--texto-secundario);
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
}

.tarjeta{
background:var(--tarjeta-bg);
position:relative;
padding:20px;
border-radius:10px;
box-shadow:0 4px 10px rgba(0,0,0,0.1);
transition: background 0.3s, box-shadow 0.3s;
}

@keyframes tarjetaAparecer{
from{ opacity:0; transform:translateY(14px); }
to{ opacity:1; transform:translateY(0); }
}

.tarjeta.animar{
opacity:0;
animation: tarjetaAparecer 0.4s ease-out forwards;
animation-delay: var(--retraso, 0ms);
}

@media (prefers-reduced-motion: reduce){
.tarjeta.animar{ animation:none; opacity:1; }
}

.tienda{
font-weight:bold;
font-size:18px;
margin-bottom:5px;
}

.lista{
color:#555;
margin-bottom:10px;
}

.progress{
background:#eee;
height:20px;
border-radius:20px;
overflow:hidden;
margin-bottom:10px;
}

.bar{
height:100%;
transition: width 0.3s;
background:linear-gradient(90deg,var(--verde),#58d68d);
}

.tarjeta.advertencia .bar{ background:linear-gradient(90deg,var(--amarillo),#f7dc6f); }
.tarjeta.urgente .bar{ background:linear-gradient(90deg,var(--rojo),#ec7063); }
.tarjeta.completada .bar{ background:linear-gradient(90deg,var(--verde-oscuro),var(--verde)); }

.estado{
font-weight:bold;
margin-bottom:10px;
}

.tareas{
margin-top:10px;
font-size:14px;
}

.ok{ color:#2e7d32; display:flex; align-items:center; }
.bad{ color:#c62828; display:flex; align-items:center; }

.fecha{
font-size:12px;
color:#666;
margin-top:4px;
display:flex;
align-items:center;
}

.dias{
font-size:12px;
margin-bottom:6px;
font-weight:bold;
}

.verde{ color:#2e7d32; }
.amarillo{ color:#f9a825; }
.rojo{ color:#c62828; }

.tarjeta.normal{ border-left:6px solid var(--verde); }
.tarjeta.advertencia{ border-left:6px solid var(--amarillo); }
.tarjeta.urgente{ border-left:6px solid var(--rojo); background:#fff5f5; }
.tarjeta.completada{ border-left:6px solid var(--verde-oscuro); background:#f2fff5; opacity:0.85; }

.orden{
position:absolute;
top:10px;
right:10px;
background:var(--azul-oscuro);
color:white;
padding:4px 8px;
border-radius:8px;
font-size:12px;
font-weight:bold;
display:flex;
align-items:center;
}

.orden svg{ margin-right:0; }

.tarjeta:first-child{
border:3px solid #3498db;
box-shadow:0 0 10px rgba(52,152,219,0.7);
}

.header{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
margin-bottom:20px;
flex-wrap:wrap;
}

#banner{
flex:1;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
background:var(--azul-oscuro);
color:white;
padding:8px 12px;
border-radius:8px;
font-size:13px;
font-weight:bold;
max-width:500px;
display:flex;
align-items:center;
transition: background 0.3s;
}

.reloj-fecha, .ultima-actualizacion{
text-align:center;
border-radius:8px;
}

.reloj-fecha{
font-size:18px;
font-weight:bold;
padding:10px;
background:var(--fondo);
margin-bottom:15px;
box-shadow:0 2px 4px rgba(0,0,0,0.1);
display:flex;
align-items:center;
justify-content:center;
}

.ultima-actualizacion{
font-size:14px;
color:#555;
margin-bottom:10px;
font-style:italic;
display:flex;
align-items:center;
justify-content:center;
}

.encabezado{
display:flex;
align-items:center;
justify-content:center;
gap:15px;
margin-bottom:15px;
background:var(--fondo);
padding:10px;
border-radius:10px;
box-shadow:0 2px 4px rgba(0,0,0,0.1);
}

.logo{ height:60px; }

.titulo{
margin:0;
font-family: 'Montserrat', sans-serif;
font-size:28px;
font-weight:700;
letter-spacing:1px;
color:var(--azul-oscuro);
}

.logo-marca{
height:100px;
max-width:180px;
object-fit:contain;
display:block;
margin:4px auto;
transition: background 0.3s;
}

.busquedas select {
padding: 10px;
border-radius: 8px;
border: 1px solid #ccc;
margin-right: 10px;
background: white;
font-size: 14px;
cursor: pointer;
}

#toggleDarkMode {
padding: 10px 15px;
border-radius: 8px;
cursor: pointer;
background: var(--azul-oscuro);
color: white;
border: none;
font-weight: bold;
transition: 0.3s;
font-size: 14px;
display:flex;
align-items:center;
}

#toggleDarkMode:hover {
opacity: 0.9;
}

#btnSubir{
position:fixed;
bottom:24px;
right:24px;
width:48px;
height:48px;
border-radius:50%;
background:var(--azul-oscuro);
color:white;
border:none;
cursor:pointer;
box-shadow:0 4px 10px rgba(0,0,0,0.25);
display:flex;
align-items:center;
justify-content:center;
opacity:0;
pointer-events:none;
transform:translateY(10px);
transition: opacity 0.25s, transform 0.25s;
z-index:1000;
}

#btnSubir.visible{
opacity:1;
pointer-events:auto;
transform:translateY(0);
}

#btnSubir:hover{ opacity:0.85; }

.btnWhatsapp{
position:fixed;
bottom:24px;
left:24px;
display:flex;
align-items:center;
gap:8px;
background:#25D366;
color:white;
padding:12px 18px;
border-radius:999px;
text-decoration:none;
font-weight:bold;
font-size:14px;
box-shadow:0 4px 14px rgba(0,0,0,0.25);
z-index:1000;
transition: transform 0.2s, box-shadow 0.2s;
}

.btnWhatsapp:hover{
transform:translateY(-2px);
box-shadow:0 6px 18px rgba(0,0,0,0.3);
color:white;
}

@media(max-width:600px){
.btnWhatsapp{
    padding:10px 14px;
    font-size:12px;
    gap:6px;
    max-width: calc(100vw - 48px);
    white-space: normal;
    line-height:1.3;
}
}

@media(max-width:700px){
.busquedas{ flex-direction:column; width:100%; }
.busquedas select{ width:100%; margin-bottom: 10px; }
.encabezado { flex-direction: column; text-align: center; }
#banner{ max-width:100%; }
}

/* =========================================
   MODO OSCURO (DARK MODE)
========================================= */
body.dark-mode {
    background: #121212;
    color: #e0e0e0;
}

body.dark-mode .tarjeta {
    background: #1e1e1e;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    color: #e0e0e0;
}

body.dark-mode .lista,
body.dark-mode .fecha,
body.dark-mode .cargando,
body.dark-mode .vacio {
    color: #aaaaaa;
}

body.dark-mode .tarjeta.urgente {
    background: #3a1c1c;
    border-left-color: #ff5252;
}

body.dark-mode .tarjeta.completada {
    background: #1a2e20;
    border-left-color: #4caf50;
}

body.dark-mode .tarjeta.advertencia {
    border-left-color: #ffd54f;
}

body.dark-mode .reloj-fecha,
body.dark-mode .encabezado {
    background: #1e1e1e;
    box-shadow: 0 2px 4px rgba(255,255,255,0.05);
}

body.dark-mode .titulo {
    color: #ffffff;
}

body.dark-mode .ultima-actualizacion {
    color: #aaaaaa;
}

body.dark-mode .progress {
    background: #333333;
}

body.dark-mode .orden {
    background: #444444;
}

body.dark-mode .busquedas select {
    background: #2a2a2a;
    color: #ffffff;
    border: 1px solid #444444;
}

/* Ajustes de colores de texto para mejor contraste en fondo oscuro */
body.dark-mode .ok, body.dark-mode .verde { color: #81c784; }
body.dark-mode .bad, body.dark-mode .rojo { color: #e57373; }
body.dark-mode .amarillo { color: #ffd54f; }

/* Boton de toggle en modo oscuro */
body.dark-mode #toggleDarkMode {
    background: #f1c40f;
    color: #2c3e50;
}

/*
  SOLUCION PARA LOGOS NEGROS
  Fondo blanco fijo detras de los logos para que las letras/imagenes
  negras resalten en modo oscuro.
*/
body.dark-mode .logo-marca,
body.dark-mode .logo {
    background-color: #ffffff;
    padding: 10px;
    border-radius: 12px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.15);
}