/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #1a1a2e;
    color: #e0e0e0;
    font-family: 'Outfit', sans-serif;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.app-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 1rem;
    position: relative;
    background: radial-gradient(circle at 50% 10%, #2a2a4e 0%, #1a1a2e 40%, #16213e 100%);
}

/* Header */
header {
    text-align: center;
    z-index: 10;
}

h1 {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    margin-bottom: 0.5rem;
}

.status-indicator {
    font-size: 0.9rem;
    color: #6a6a8e;
    font-weight: 500;
    transition: color 0.3s ease;
}

.status-indicator.active {
    color: #00ff88;
    text-shadow: 0 0 5px rgba(0, 255, 136, 0.5);
}

/* Main Content Wrapper */
.main-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex: 1;
    /* Ocupa el espacio disponible entre header y footer */
}

/* Compass Main */
.compass-container {
    position: relative;
    width: 280px;
    /* Un poco más pequeño para asegurar espacio */
    height: 280px;
    margin-bottom: 2rem;
    /* Separación con los datos */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    /* Evitar que se aplaste en pantallas pequeñas */
}

.compass-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 0 30px rgba(0, 0, 0, 0.5),
        inset 0 0 20px rgba(255, 255, 255, 0.05);
    transition: transform 0.1s linear;
    /* Suavizar rotación */
    display: flex;
    justify-content: center;
    align-items: center;
}

.compass-center {
    position: absolute;
    width: 15px;
    height: 15px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    z-index: 5;
}

/* Aguja Estática (Fixed Indicator) - Si el disco gira, la aguja visual es fija arriba */
/* En este diseño, el disco gira. Necesitamos un indicador fijo en la parte SUPERIOR externa para marcar la lectura actual */
.compass-needle {
    /* En realidad no es la aguja vieja, es el indicador de rumbo actual */
    position: absolute;
    top: -20px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 20px solid #ff3366;
    /* Triángulo invertido apuntando abajo */
    z-index: 20;
    filter: drop-shadow(0 0 5px rgba(255, 51, 102, 0.5));
}

/* Repurpose the needle ID in logic: wait, logic rotates ring. 
   So the "needle" element inside the ring is confusing if it rotates WITH the ring.
   Let's fix the CSS:
   We want the Cardinal Points inside .compass-ring to rotate.
   We want a static marker OUTSIDE .compass-ring indicating "Forward".
*/

/* Sobreescribimos .compass-needle para que sea un elemento fijo fuera del anillo O dentro pero contrarotado?
   Mejor: La aguja roja (Norte) debe estar DENTRO del anillo y girar con él.
   El indicador de "Tu Rumbo" es estático arriba.
*/

/* Re-thinking visual:
   Option A: Classic Compass. Ring fixed, Needle rotates pointing North. 
             Reading is where the needle points.
   Option B: Modern Phone Compass. Ring rotates so "North" matches real North. 
             Static marker at top of phone shows your heading.
             
   My JS logic does: compassRing.style.transform = `rotate(${-heading}deg)`;
   This means if I face East (90deg), Heading is 90. Rotation is -90.
   The Ring rotates -90deg (Counter-Clockwise).
   The "N" (originally at top) moves to Left (West visually).
   Wait. If I face East, North is to my Left.
   So "N" being at Left is correct.
   The static marker at top now points to "E" on the ring (which was at Right, now rotated to Top).
   This is Option B. Correct.
*/

/* Ajuste de .compass-needle para ser el indicador 'Norte' dentro del anillo */
#needle {
    /* Esta "aguja" será una línea roja pintada en el anillo apuntando a la N */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%) translateY(-50px);
    /* Ajustar posición */
    /* No, mejor usar los caracteres N/S/E/O */
    display: none;
    /* Ocultamos la aguja separada, usaremos estilos en los puntos cardinales */
}

/* Marcador Estático Superior (Tu Dirección) */
.compass-container::after {
    content: '';
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 20px solid #fff;
    /* Triángulo apuntando arriba? No, apuntando al disco */
    /* Mejor: Triángulo rojo indicando "Aquí miras tú" */
    border-bottom: 20px solid #ff3366;
    transform: translateX(-50%) rotate(180deg);
    /* Apunta abajo hacia el disco */
    z-index: 20;
    filter: drop-shadow(0 0 8px rgba(255, 51, 102, 0.8));
}

.cardinal {
    position: absolute;
    font-weight: 700;
    font-size: 1.2rem;
    color: #fff;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.cardinal.n {
    top: 15px;
    color: #ff3366;
    font-size: 1.5rem;
    text-shadow: 0 0 10px rgba(255, 51, 102, 0.6);
}

.cardinal.s {
    bottom: 15px;
}

.cardinal.e {
    right: 15px;
}

.cardinal.w {
    left: 15px;
}

.mark {
    position: absolute;
    width: 2px;
    background-color: rgba(255, 255, 255, 0.3);
    top: 50%;
    left: 50%;
    transform-origin: bottom center;
}

.mark.major {
    height: 15px;
    background-color: rgba(255, 255, 255, 0.8);
    width: 3px;
}

.mark.minor {
    height: 8px;
}

/* Readout */
.readout-container {
    text-align: center;
    margin-top: 2rem;
}

.degree-value {
    font-size: 4rem;
    font-weight: 300;
    color: #fff;
    line-height: 1;
}

.direction-label {
    font-size: 1.5rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-top: 0.2rem;
    margin-bottom: 1.5rem;
}

/* Altitude */
.altitude-container {
    background: rgba(255, 255, 255, 0.05);
    padding: 0.5rem 1.2rem;
    border-radius: 15px;
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 1rem;
}

.alt-icon {
    font-size: 1rem;
    margin-right: 5px;
}

.alt-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
}

.alt-unit {
    font-size: 0.9rem;
    color: #aaa;
    font-weight: 500;
}

/* Solar & Info Grid */
.info-grid {
    display: flex;
    align-items: center;
    /* Alinear verticalmente al centro */
    justify-content: center;
    margin-bottom: 1rem;
    width: 100%;
    gap: 0.5rem;
    /* Reducir gap porque el arco ocupa espacio */
}

/* Solar Arc */
.solar-arc-container {
    width: 200px;
    /* Más grande */
    height: 80px;
    display: flex;
    align-items: flex-end;
    /* Alinear arco abajo */
    justify-content: center;
    margin: 0 auto 0.5rem auto;
    /* Centrado */
}

.solar-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.arc-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.6);
    /* Más visible */
    stroke-width: 2;
    stroke-dasharray: 4, 4;
    /* Guiones curvados */
    stroke-linecap: round;
}

.info-item {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 0.5rem 0.8rem;
    /* Reducir padding horizontal */
    display: flex;
    flex-direction: column;
    /* Cambiar a columna para ahorrar ancho */
    align-items: center;
    gap: 5px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    min-width: 70px;
}

.info-item .icon {
    font-size: 1.2rem;
}

.info-text {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.info-item .label {
    font-size: 0.6rem;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.info-item .value {
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
}

/* Coordinates */
.coords-container {
    font-family: monospace;
    color: #666;
    /* Más discreto */
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 0.5rem;
}

.coords-container .icon {
    font-size: 0.9rem;
    filter: grayscale(1);
    opacity: 0.5;
}

/* Footer & Buttons */
footer {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-bottom: 1rem;
}

.btn-permission {
    background: linear-gradient(135deg, #ff3366 0%, #ff5533 100%);
    border: none;
    padding: 1rem 2rem;
    border-radius: 50px;
    color: white;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(255, 51, 51, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-permission:active {
    transform: scale(0.95);
    box-shadow: 0 2px 10px rgba(255, 51, 51, 0.3);
}