/* ============================================
   WEBSTATION — ARROYO ESCOBAR
   styles.css  (compacto v2)
   ============================================ */

:root {
    --bg-color: #f4f4f5;
    --card-bg: #ffffff;
    --text-main: #18181b;
    --text-muted: #71717a;
    --accent: #0f766e;
    --accent-light: #14b8a6;
    --btn-bg: #e4e4e7;
    --btn-hover: #d4d4d8;
    --link-bg: #fafafa;
    --link-text: #a1a1aa;
    --link-border: #e4e4e7;
    --radius: 12px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 10px rgba(0,0,0,0.1);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #09090b;
        --card-bg: #18181b;
        --text-main: #f4f4f5;
        --text-muted: #a1a1aa;
        --accent: #2dd4bf;
        --accent-light: #5eead4;
        --btn-bg: #27272a;
        --btn-hover: #3f3f46;
        --link-bg: #111113;
        --link-text: #71717a;
        --link-border: #27272a;
        --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
        --shadow-md: 0 4px 10px rgba(0,0,0,0.4);
    }
}

*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg-color);
    color: var(--text-main);
    margin: 0;
    padding: 15px;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    line-height: 1.5;
    -webkit-tap-highlight-color: transparent;
}

.wrap {
    max-width: 500px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* HEADER */
header { text-align: center; padding: 8px 0; }
header h1 { font-size: 1.4rem; font-weight: 700; margin: 0; letter-spacing: -0.02em; }
header .sub { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 0.7rem; color: var(--text-muted); margin-top: 8px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); transition: 0.3s; }
.status-dot.on { background: #22c55e; box-shadow: 0 0 6px #22c55e; }
.status-dot.off { background: #ef4444; box-shadow: 0 0 6px #ef4444; }

/* LIVESTREAM */
.video-wrap {
    background: #000;
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
    padding-bottom: 56.25%;
    box-shadow: var(--shadow-md);
}
.video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
.video-label {
    position: absolute; bottom: 8px; left: 8px;
    background: rgba(0,0,0,0.6); color: #fff; font-size: 0.65rem;
    padding: 3px 8px; border-radius: 6px; backdrop-filter: blur(4px);
    display: flex; align-items: center; gap: 4px; z-index: 2;
}
.live-badge { width: 6px; height: 6px; background: #ef4444; border-radius: 50%; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* WEATHER — una sola línea por card */
.weather { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
.card {
    background: var(--card-bg);
    padding: 8px 10px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(0,0,0,0.02);
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    text-align: left;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.card-title {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
}
.card-val {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    text-align: right;
}
.skeleton {
    background: linear-gradient(90deg, var(--btn-bg) 25%, var(--link-bg) 50%, var(--btn-bg) 75%);
    background-size: 200% 100%; animation: skel 1.5s infinite;
    border-radius: 4px; height: 0.85rem; width: 50px; margin: 0;
}
@keyframes skel { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ===== CARRUSEL — 25% más compacto ===== */
.carrusel-sec { position: relative; }
.carrusel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; padding: 0 4px; }
.carrusel-tit { font-size: 0.85rem; font-weight: 600; }
.carrusel-count { font-size: 0.7rem; color: var(--text-muted); background: var(--btn-bg); padding: 2px 8px; border-radius: 10px; }

.carrusel-box {
    position: relative; border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow-md); background: var(--card-bg);
    min-height: 210px;          /* 280px * 0.75 */
    touch-action: pan-y; user-select: none;
}
.carrusel-track { display: flex; will-change: transform; }
.carrusel-slide {
    min-width: 100%; width: 100%; flex-shrink: 0;
    position: relative; height: 0; padding-bottom: 100%;
    overflow: hidden; background: #0a0a0a;
}
.carrusel-slide img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: contain; display: block; pointer-events: none;
}
.img-ph {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: none; flex-direction: column; align-items: center; justify-content: center;
    background: var(--btn-bg); color: var(--text-muted); font-size: 0.85rem; gap: 10px;
}
.img-ph svg { width: 48px; height: 48px; opacity: 0.4; }
.carrusel-cap {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 35px 14px 14px;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: #fff; font-size: 0.9rem; font-weight: 500; z-index: 2;
    text-align: center;
}

.carrusel-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px; border-radius: 50%; border: none;
    background: rgba(0,0,0,0.5); color: #fff; font-size: 0.85rem;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(4px); z-index: 10; opacity: 0.7; transition: 0.2s;
}
.carrusel-btn:hover { opacity: 1; background: rgba(0,0,0,0.75); transform: translateY(-50%) scale(1.1); }
.carrusel-btn.prev { left: 8px; }
.carrusel-btn.next { right: 8px; }

.carrusel-dots { display: flex; justify-content: center; gap: 5px; padding: 10px 0 4px; position: relative; z-index: 5; }
.carrusel-dot { width: 7px; height: 7px; border-radius: 50%; border: none; background: var(--btn-bg); cursor: pointer; transition: 0.3s; padding: 0; }
.carrusel-dot.active { background: var(--accent); width: 18px; border-radius: 4px; }
.carrusel-bar { position: absolute; bottom: 0; left: 0; height: 3px; background: var(--accent); width: 0%; z-index: 6; border-radius: 0 2px 2px 0; }

/* LINKS — botones clickeables */
.links .nav-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.btn-link {
    display: block;
    background: var(--link-bg);
    color: var(--link-text);
    text-align: center;
    padding: 10px 2px;
    border-radius: var(--radius);
    font-size: 0.8rem;
    border: 1px dashed var(--link-border);
    transition: 0.3s;
    text-decoration: none;
    cursor: pointer;
}
.btn-link:hover {
    background: var(--btn-bg);
    color: var(--text-main);
    border-style: solid;
    transform: translateY(-1px);
}

/* FOOTER */
footer { text-align: center; margin-top: 6px; padding-bottom: 20px; }
.ts { font-size: 0.75rem; color: var(--text-muted); font-weight: 500; }
.copy { font-size: 0.7rem; color: var(--link-text); margin: 8px 0 0 0; }

/* RESPONSIVE */
@media (max-width: 400px) {
    .wrap { padding: 0 5px; }
    header h1 { font-size: 1.2rem; }
    .card-val { font-size: 0.8rem; }
    .carrusel-btn { width: 28px; height: 28px; }
    .carrusel-box { min-height: 165px; }   /* 220px * 0.75 */
}
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}