/* Variables CSS (mantener igual) */
:root {
    --color-primary: #007aff;
    --color-primary-dark: #005bbd;
    --color-background-light: #f2f2f7;
    --color-background-menu: #f9f9f9;
    --color-border: #e0e0e0;
    --color-text-dark: #333;
    --color-text-medium: #555;
    --color-text-light: #8e8e93;
    --color-success: #34c759;
    --color-error: #ff3b30;
    --font-family-base: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --border-radius-base: 8px;
    --border-radius-large: 15px;
}

body {
    font-family: var(--font-family-base);
    background-color: var(--color-background-light);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    margin: 0;
    box-sizing: border-box;
    padding: 20px;
    color: var(--color-text-dark);
    line-height: 1.6;
    overflow-y: auto;
    overflow-x: hidden;
}

.iphone-frame {
    width: 100%;
    max-width: 1000px;
    border: none;
    border-radius: var(--border-radius-large);
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 80vh; /* Altura mínima para la aplicación en desktop */
    background-color: #fff;
}

.iphone-frame .notch {
    display: none;
}

.screen {
    background-color: #fff;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: 0;
    box-shadow: none;
    overflow-y: hidden; /* ¡CAMBIO IMPORTANTE! Quitamos el scroll del .screen aquí */
    overflow-x: hidden;
    min-height: unset;
}

/*header {
    background-color: var(--color-background-menu);
    padding: 15px;
    border-bottom: 1px solid var(--color-border);
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 10;
    flex-shrink: 0;
} */
 header {
    background-color: #02203a; /* ¡COLOR CAMBIADO AQUÍ! */
    padding: 15px;
    border-bottom: 1px solid var(--color-border);
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 10;
    flex-shrink: 0;
}

header h1 {
    margin: 0;
    font-size: 28px;
    color: var(--color-text-dark);
}

/* --- ESTILOS PARA AMBOS MENÚS (iphone-menu y iphone-menu2) --- */
nav#iphone-menu, nav#iphone-menu2 {
    background-color: var(--color-background-menu);
    border-bottom: 1px solid var(--color-border);
    padding: 10px 0;
    z-index: 9;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-shrink: 0;
}

nav#iphone-menu {
    border-top: none;
    position: sticky;
    top: 62px;
}

nav#iphone-menu2 {
    border-top: 1px solid var(--color-border);
    border-bottom: none;
    position: sticky;
    bottom: 0;
    z-index: 9;
    margin-top: auto;
}

nav#iphone-menu ul, nav#iphone-menu2 ul {
    list-style: none;
    padding: 0 10px;
    margin: 0;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
}

nav#iphone-menu li, nav#iphone-menu2 li {
    flex-shrink: 0;
    padding: 10px 15px;
    cursor: pointer;
    color: var(--color-primary);
    font-weight: 500;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    border-radius: var(--border-radius-base);
    text-align: center;
    white-space: nowrap;
    margin: 0 5px;
    position: relative;
}

nav#iphone-menu li:not(:last-child)::after,
nav#iphone-menu2 li:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -2px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 60%;
    background-color: var(--color-border);
}

nav#iphone-menu li.active, nav#iphone-menu2 li.active {
    background-color: var(--color-primary);
    color: #fff;
}

nav#iphone-menu li:hover, nav#iphone-menu2 li:hover {
    background-color: #e5e5ea;
}

nav#iphone-menu::-webkit-scrollbar, nav#iphone-menu2::-webkit-scrollbar {
    height: 4px;
}

nav#iphone-menu::-webkit-scrollbar-track, nav#iphone-menu2::-webkit-scrollbar-track {
    background: transparent;
}

nav#iphone-menu::-webkit-scrollbar-thumb, nav#iphone-menu2::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
}

nav#iphone-menu::-webkit-scrollbar-thumb:hover, nav#iphone-menu2::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

main {
    padding: 20px;
    flex-grow: 1;
    overflow-y: auto; /* ¡CAMBIO IMPORTANTE! El scroll ahora reside en el main */
    width: 100%;
    box-sizing: border-box;
    display: flex; /* Añadir flexbox para que las secciones llenen el espacio */
    flex-direction: column; /* Organizar las secciones en columna */
}

section {
    background-color: #fff;
    padding: 20px;
    border-radius: var(--border-radius-large);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    margin-bottom: 0; /* ¡CAMBIO IMPORTANTE! Eliminar margen inferior predeterminado */
    display: none;
    flex-grow: 1; /* ¡CAMBIO IMPORTANTE! Permite que la sección activa ocupe el espacio */
    min-height: fit-content; /* Asegura que la sección no se encoja menos que su contenido */
    max-height: 100%; /* Evita que la sección se desborde si el contenido es pequeño */
    box-sizing: border-box; /* Incluir padding en el cálculo de altura */
}

/* Revertimos el margen inferior específico a 0px si la sección está activa */
/* Esto asegura que no haya espacio entre la sección y el menú inferior. */
section.active {
    display: flex; /* Usamos flex para la sección activa para alinear el contenido */
    flex-direction: column;
    margin-bottom: 0px !important; /* ¡CAMBIO IMPORTANTE! Elimina el espacio */
    overflow-y: auto; /* La sección activa puede tener su propio scroll si el contenido es largo */
}


h2 {
    color: var(--color-text-dark);
    font-size: 24px;
    margin-top: 0;
    margin-bottom: 20px;
    text-align: center;
}

.form-group { margin-bottom: 15px; }
label { display: block; margin-bottom: 8px; color: var(--color-text-medium); font-size: 16px; font-weight: 500; }
input[type="text"], input[type="email"], textarea { width: calc(100% - 24px); padding: 12px; border: 1px solid #d1d1d6; border-radius: var(--border-radius-base); font-size: 16px; color: var(--color-text-dark); background-color: #f9f9f9; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05); transition: border-color 0.2s, box-shadow 0.2s; }
input[type="text"]:focus, input[type="email"]:focus, textarea:focus { border-color: var(--color-primary); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 3px rgba(0, 122, 255, 0.2); outline: none; }
textarea { resize: vertical; min-height: 120px; }
button { width: 100%; padding: 15px; background-color: var(--color-primary); color: #fff; border: none; border-radius: 10px; font-size: 18px; font-weight: 600; cursor: pointer; transition: background-color 0.2s ease-in-out; margin-top: 20px; }
button:hover { background-color: var(--color-primary-dark); }
.info-message, .error-message, .success-message { margin-top: 15px; padding: 12px; border-radius: var(--border-radius-base); text-align: center; font-size: 15px; font-weight: 500; }
.info-message { background-color: #e5e5ea; color: var(--color-text-light); }
.error-message { background-color: #ffe6e6; color: var(--color-error); display: none; }
.success-message { background-color: #e6ffed; color: var(--color-success); }
.content-info p { line-height: 1.6; margin-bottom: 1em; }
.content-info ul { list-style: disc; margin-left: 20px; margin-bottom: 1em; }
.content-info ol { list-style: decimal; margin-left: 20px; margin-bottom: 1em; }
.content-info li { margin-bottom: 0.5em; }
.content-info h3 { color: var(--color-primary); font-size: 20px; margin-top: 30px; margin-bottom: 10px; }

.result-box {
    background-color: var(--color-background-menu);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-base);
    padding: 15px;
    margin-top: 20px;
    color: var(--color-text-dark);
    font-size: 15px;
}

.result-box h3 {
    margin-top: 0;
    color: var(--color-primary);
    font-size: 18px;
    margin-bottom: 10px;
}

.result-box p {
    margin: 5px 0;
}

::-webkit-scrollbar {
    width: 8px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--color-background-light);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #c7c7cc;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a9a9b0;
}

/* --- ESTILOS PARA LA VISTA DE REGISTROS (NO TABLA) --- */
.records-container {
    background-color: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-base);
    padding: 10px;
    margin-top: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    /* Removido max-height para permitir que llene el espacio flex, si es necesario */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex-grow: 1; /* Permitir que ocupe el espacio disponible dentro de la sección */
}

.record-item {
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: var(--border-radius-base);
    padding: 12px 15px;
    margin-bottom: 10px;
    line-height: 1.5;
    color: var(--color-text-dark);
    display: flex;
    flex-direction: column;
}

.record-item:last-child {
    margin-bottom: 0;
}

.record-item strong {
    color: var(--color-primary);
    margin-right: 5px;
    font-weight: 600;
}

.record-item p {
    margin: 3px 0;
    font-size: 15px;
}

.records-container .record-item:nth-child(even) {
    background-color: #f2f2f7;
}

.records-container .record-item:hover {
    background-color: #e5e5ea;
    cursor: default;
}

/* --- Media Queries: Ajustes para responsividad sin el marco de iPhone --- */
@media (max-width: 768px) {
    body {
        padding: 0;
        align-items: flex-start;
    }

    .iphone-frame {
        border-radius: 0;
        box-shadow: none;
        min-height: 100vh;
    }

    header h1 {
        font-size: 24px;
    }

    nav#iphone-menu li, nav#iphone-menu2 li {
        font-size: 14px;
        padding: 8px 12px;
    }

    nav#iphone-menu li:not(:last-child)::after,
    nav#iphone-menu2 li:not(:last-child)::after {
        right: -2px;
    }

    main {
        padding: 15px;
    }

    section {
        padding: 15px;
        margin-bottom: 0; /* Asegurar 0 margen en móviles también */
    }

    h2 {
        font-size: 20px;
    }

    input[type="text"],
    input[type="email"],
    textarea,
    button {
        font-size: 15px;
        padding: 10px;
    }

    .records-container {
        padding: 8px;
        /* max-height: 250px; No necesario si flex-grow se encarga */
    }

    .record-item {
        padding: 10px 12px;
        margin-bottom: 8px;
        font-size: 14px;
    }

    .record-item p {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .records-container {
        padding: 8px;
        /* max-height: 250px; */
    }

    .record-item {
        padding: 10px 12px;
        margin-bottom: 8px;
        font-size: 14px;
    }

    .record-item p {
        font-size: 14px;
    }
}