/* Variables y reseteo básico */
:root {
    --bg-color: #121212;
    --text-color: #f1f1f1;
    --btn-libre: #2e7d32;
    --btn-ocupado: #c62828;
    --header-bg: #1e1e1e;
    --jornada-bg: #1565c0;
    --nav-bg: #1e1e1e;
    
    /* Tonos de verde para recuadros discretos */
    --tag-1: #1b5e20;
    --tag-2: #2e7d32;
    --tag-3: #388e3c;
    --tag-4: #4caf50;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: system-ui, sans-serif; }
body { background-color: var(--bg-color); color: var(--text-color); display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

/* Header (GPS + Jornada) */
header { background-color: var(--header-bg); padding: 10px 15px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #333; }
.gps-status { font-size: 0.9em; color: #aaa; }
.jornada-pill { background-color: var(--jornada-bg); padding: 5px 12px; border-radius: 20px; display: flex; align-items: center; gap: 8px; font-size: 0.9em; }
.jornada-btn { background: none; border: none; color: white; cursor: pointer; font-size: 1.2em; line-height: 1; }

/* Contenido principal */
main { flex: 1; display: flex; flex-direction: column; position: relative; }
.tab-content { display: none; flex: 1; padding: 15px; flex-direction: column; }
.tab-content.active { display: flex; }

/* Pestaña Servicio */
#tab-servicio { padding: 0; justify-content: center; }
.main-btn { width: 100%; height: 60vh; border: none; font-size: 3em; font-weight: bold; color: white; transition: background-color 0.3s; position: relative; }
.main-btn.libre { background-color: var(--btn-libre); }
.main-btn.ocupado { background-color: var(--btn-ocupado); }

.info-carrera { text-align: center; padding: 20px; font-size: 1.2em; height: 20vh; display: flex; flex-direction: column; justify-content: center;}
.cronometro { font-size: 2em; font-family: monospace; font-weight: bold; margin-bottom: 10px; }

/* Recuadros discretos */
.etiquetas-container { position: absolute; bottom: 20px; left: 0; right: 0; display: flex; justify-content: center; gap: 15px; pointer-events: none; }
.etiqueta-box { width: 40px; height: 40px; border-radius: 4px; pointer-events: auto; cursor: pointer; border: 2px solid rgba(255,255,255,0.2); }
.etiqueta-box:nth-child(1) { background-color: var(--tag-1); }
.etiqueta-box:nth-child(2) { background-color: var(--tag-2); }
.etiqueta-box:nth-child(3) { background-color: var(--tag-3); }
.etiqueta-box:nth-child(4) { background-color: var(--tag-4); }

.btn-cancelar { background-color: transparent; color: #ff5252; border: 1px solid #ff5252; padding: 10px; border-radius: 8px; margin: 0 20px; display: none; }
.ocupado-mode .btn-cancelar { display: block; }
.ocupado-mode .etiquetas-container { display: none; }

/* Navegación inferior */
nav { background-color: var(--nav-bg); display: flex; border-top: 1px solid #333; padding-bottom: env(safe-area-inset-bottom); }
.nav-btn { flex: 1; padding: 15px 0; background: none; border: none; color: #888; font-size: 0.9em; cursor: pointer; }
.nav-btn.active { color: white; border-top: 2px solid white; }