/* --- Critical CSS for initial render --- */
:root {
    --background-color: #F8F9FA;
    --text-color: #212529;
    --secondary-text-color: #6C757D;
    --primary-color: #c1121f;
}

body.dark-mode {
    --background-color: #1A202C;
    --text-color: #E2E8F0;
    --secondary-text-color: #718096;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html, body {
    height: 100%;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    display: flex;
    padding: 1vmin;
    transition: background-color 0.5s ease, color 0.5s ease;
}

.dashboard-container {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

.widget {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2vmin;
    overflow: hidden;
    width: 100%;
    height: 100%;
    flex: 1 1 0%;
}

@media (orientation: portrait) {
    .dashboard-container { flex-direction: column; }
    #calendar-container { height: 55%; flex: none; }
    #clock-container { height: 45%; flex: none; }
    .action-button.top-right {
        margin-bottom: 2vmin;
    }
}

#clock-time {
    font-variant-numeric: tabular-nums;
    font-weight: 300;
    line-height: 1;
    color: var(--text-color);
    transition: color 0.5s ease;
}

#sun-info {
    display: flex;
    flex-direction: row; /* Align items horizontally */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    font-size: 3.5vmin;
    font-weight: 500;
    margin-top: 2.5vmin; /* Keep some margin from clock */
    color: var(--secondary-text-color);
    opacity: 0; /* Will be set to 1 by JS when content is ready */
    letter-spacing: 0.05em;
    transition: color 0.5s ease, opacity 0.5s ease;
    pointer-events: none;
}

#sun-info .sun-moon-icon svg {
    width: 1em; /* Match font size */
    height: 1em; /* Match font size */
    margin-right: 0.5em; /* Spacing between icon and time */
    stroke-width: 1.5; /* Default stroke-width for icons */
    vertical-align: middle; /* Ensure vertical alignment */
    display: block; /* Ensures consistent box model for alignment */
}

.sun-time-text {
    vertical-align: middle; /* Ensure vertical alignment */
    line-height: 1; /* Normalize line height */
}

.action-button {
    color: var(--text-color);
    border: none;
    border-radius: 5px;
    padding: 5px 8px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    z-index: 1001;
    position: fixed;
}

.action-button.top-right {
    top: 10px;
    right: 10px;
}

/*
  Hoja de estilos final.
  Versión 14: Ajustes finales de UI/UX.
  - Mayor tamaño para la info de amanecer/atardecer.
  - Cursor más claro para elementos no interactivos.
  - Feedback visual al tocar el área del reloj.
*/

/* Animación de fundido para el calendario */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

/* --- Reloj y Amanecer/Atardecer --- */
#clock-container {
    /* Removed transition: transform 0.1s ease; */
}

@media (orientation: landscape) {
  #clock-time { font-size: 17vw; }
}
@media (orientation: portrait) {
  #clock-time { font-size: 28vw; }
}

/* --- Calendario --- */
#calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 450px;
    margin-bottom: 2.5vmin;
    font-size: max(20px, 4vmin); /* Ensure a minimum size */
    color: var(--secondary-text-color);
    transition: color 0.5s ease, max-width 0.5s ease;
}

.calendar-title {
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease;
    user-select: none;
}
.calendar-title:active { transform: scale(0.95); }

.nav-arrow {
    font-size: max(24px, 6vmin); /* Ensure a minimum size */
    font-weight: 300;
    cursor: pointer;
    padding: 1vmin 3vmin;
    user-select: none;
    border-radius: 8px;
    transition: transform 0.1s ease, background-color 0.2s ease;
}
.nav-arrow:hover { background-color: rgba(128, 128, 128, 0.1); }
.nav-arrow:active { transform: scale(0.9); }

#calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-gap: 1.5vmin;
    width: 100%;
    max-width: 450px;
    transition: max-width 0.5s ease;
}

.calendar-cell {
    position: relative;
    width: 100%;
    font-size: 2.8vmin;
    font-weight: 400;
    cursor: default; /* Celdas de calendario no interactivas */
}
.calendar-cell:before { content: ''; display: block; padding-top: 100%; }
.calendar-cell .content {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    display: flex; justify-content: center; align-items: center;
    transition: color 0.5s ease, background-color 0.5s ease;
    pointer-events: none; /* Asegura que el click se registre en la celda/grid */
}

.day-name .content {
    color: var(--secondary-text-color);
    font-weight: 600;
}

.today .content {
    background-color: var(--primary-color);
    color: #FFFFFF;
    font-weight: 700;
    border-radius: 50%;
}


/* --- New Control Styles --- */
.top-right-controls {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 1002;
    display: flex;
    gap: 8px;
}

.control-button {
    background-color: transparent;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    width: 52px;
    height: 52px;
    padding: 10px;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.control-button:hover {
    background-color: rgba(128, 128, 128, 0.1);
}

.control-button svg {
    width: 100%;
    height: 100%;
    stroke-width: 1.5;
    fill: currentColor; /* Ensure fill color matches text color */
    stroke: currentColor; /* Ensure stroke color matches text color */
}

.info-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    color: white;
    padding: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 1010;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
}

.info-banner p {
    margin: 0;
    margin-right: 15px;
}

.info-banner button {
    padding: 8px 16px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}


#debug-log {
    display: none !important; /* Force hide by default */
}

#debug-log.debug-log-visible {
    display: block !important;
}

/* --- Estilos para pantallas grandes --- */
@media (min-width: 768px) {
    #calendar-header, #calendar-grid { max-width: 600px; grid-gap: 2vmin; }
    #calendar-header { font-size: 26px; }
    .nav-arrow { font-size: 36px; }
    .calendar-cell { font-size: 18px; }
    #sun-info { font-size: 36px; } /* Increased again */
    #sun-info svg { width: 25px; height: 25px; margin-right: 10px; } /* Ajustado */
}