/* Layout Styles para OmniVentX */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
    margin: 0;
    background: var(--sys-bg, #f8fafc);
}

/* Instalada como app, la pantalla llega hasta los bordes del teléfono: sin esto, el contenido
   se mete debajo de la barra de estado y del indicador de inicio. En el navegador estos
   valores son cero, así que no cambia nada. */
.app-header { padding-top: env(safe-area-inset-top); }
footer { padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }

/* En el móvil, una tabla ancha empujaba la página entera a lo ancho y dejaba las últimas
   columnas fuera de la pantalla. Con esto se desplaza dentro de su propia caja: la página no se
   mueve y no se pierde ninguna columna.
   El width:100% es para que las tablas que SÍ caben sigan ocupando todo el ancho, que si no
   encogerían al tamaño de su contenido.
   Las páginas que ya traen sus propias reglas móviles mandan sobre esta: su <style> se carga
   después de esta hoja. */
@media (max-width: 640px) {
    main table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

header {
    background: var(--sys-header, #2c3e50);
    color: white;
    padding: 1rem;
}

header .container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.app-header {
    position: sticky;
    top: 0;
    z-index: 1100;
    box-shadow: 0 4px 18px rgba(0,0,0,.12);
}

.app-nav {
    position: sticky;
    top: 72px;
    z-index: 1090;
    background: var(--sys-nav, #34495e);
    padding: 0.5rem 1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

.app-header-inner,
.nav-shell {
    max-width: 1200px;
    margin: 0 auto;
}

.app-brand-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.logo {
    font-weight: 700;
    /* El tamaño se configura en Apariencia; _Layout define la variable. */
    font-size: var(--sys-logo-font, 1.8rem);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* El logo es un enlace al inicio, pero debe seguir viéndose como el logo:
   sin subrayado ni color de enlace. */
.brand-home {
    color: inherit;
    text-decoration: none;
    border-radius: 8px;
    transition: opacity .2s;
}

.brand-home:hover,
.brand-home:focus {
    color: inherit;
    text-decoration: none;
    opacity: .85;
}

.brand-home:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.hamburger {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
}

.hamburger:hover {
    color: var(--sys-accent, #3498db);
}

nav .container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

nav a {
    color: white;
    margin-right: 1.5rem;
    text-decoration: none;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0;
    transition: color 0.3s;
    white-space: nowrap;
}

nav a:hover {
    color: var(--sys-accent, #3498db);
    text-decoration: none;
}

nav a.active {
    color: var(--sys-accent, #3498db);
    border-bottom: 3px solid var(--sys-accent, #3498db);
    padding-bottom: 0.45rem;
    font-weight: 600;
}

nav i {
    width: 20px;
    text-align: center;
}

.nav-toggle {
    display: none;
}

.nav-menu {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: thin;
}

main {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 1rem;
}

footer {
    text-align: center;
    padding: 2rem;
    color: #888;
    border-top: 1px solid #eee;
    margin-top: 2rem;
    background: white;
}

.btn-primary {
    background: var(--sys-accent, #3498db);
    color: white;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.btn-primary:hover {
    background: var(--sys-accent, #2980b9);
}

.form-group {
    margin-bottom: 1rem;
}

.form-control {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

table th, table td {
    padding: 0.5rem;
    text-align: left;
    border: 1px solid #ddd;
}

table th {
    background: #f0f0f0;
}

.text-danger {
    color: red;
    font-size: 0.875rem;
}

.header-user {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.9rem;
}

.header-user form {
    display: inline;
}

.header-user button {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    text-decoration: underline;
    font-size: 0.9rem;
    transition: color 0.3s;
}

.header-user button:hover {
    color: var(--sys-accent, #3498db);
}

.top-icon-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.top-icon-link {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.14);
    color: white;
    text-decoration: none;
    transition: all .2s ease;
    position: relative;
}

.top-icon-link:hover {
    background: rgba(255,255,255,.24);
    color: #fff;
    transform: translateY(-1px);
}

.top-icon-link i {
    font-size: 1.1rem;
}

.top-icon-counter {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: #ef4444;
    color: white;
    font-size: 0.72rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,.2);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .hamburger {
        display: block;
    }

    .app-nav {
        top: 72px;
        padding: 0;
    }

    nav .container {
        flex-direction: column;
        align-items: stretch;
        padding: 0;
    }

    .nav-menu {
        display: none;
        flex-direction: column;
        width: 100%;
        background: var(--sys-header, #2c3e50);
        padding: 1rem;
        gap: 0.25rem;
        overflow-x: visible;
    }

    .nav-toggle:checked ~ .nav-menu {
        display: flex;
    }

    nav a {
        margin-right: 0;
        margin-bottom: 0.25rem;
        padding: 0.75rem;
        display: flex;
        border-radius: 10px;
    }

    nav a.active {
        border-bottom: none;
        background: rgba(52, 152, 219, 0.15);
        padding-bottom: 0.75rem;
    }

    main {
        padding: 0.5rem;
        margin: 1rem auto;
    }

    .header-user {
        gap: 0.5rem;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    header .container {
        gap: 1rem;
    }

    /* En pantallas pequeñas el nombre se reduce, respetando el tamaño configurado.
       La imagen del logo no se toca: su recorte se calcula sobre el alto completo. */
    .logo {
        font-size: calc(var(--sys-logo-font, 1.8rem) * .8);
    }
}

@media (min-width: 769px) {
    .nav-toggle {
        display: none !important;
    }

    .nav-menu {
        display: flex !important;
    }
}