/* Global styles for Selva Real */
/* Tipografía: Satoshi (fallback sans-serif) */
:root{
    --color-primary: #FF6A00; /* naranja */
    --color-secondary: #000066; /* azul marino */
    --color-bg: #FFFFFF;
}

html,body{
    height:100%;
}
body{
    font-family: 'Satoshi', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: var(--color-bg);
    color: var(--color-secondary);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* Links and highlights use primary color */
a, a:link, a:visited{
    color: var(--color-primary);
}
a:hover, a:focus{
    color: darken(var(--color-primary), 5%);
    text-decoration: none;
}

/* Primary buttons */
.btn-primary{
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
}
.btn-primary:hover, .btn-primary:focus{
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    color: #ffffff;
}

/* Outline and light buttons adjustments */
.btn-outline-light{
    color: #fff;
    border-color: rgba(255,255,255,0.3);
}

/* Selection box effect to highlight choices (animals/digits) */
.selection-box{
    border: 3px solid var(--color-primary);
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 6px 18px rgba(255,106,0,0.12);
    transition: transform 180ms ease, box-shadow 180ms ease;
}
.selection-box:hover{
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(255,106,0,0.18);
}

/* Small screen spacing optimizations (mobile-first) */
.container{
    padding-left: 12px;
    padding-right: 12px;
}

header .navbar-brand img{
    max-height:44px;
}

/* Time and animal table styles (compact and readable) */
.table-card .table thead th{
    font-weight:700;
    letter-spacing:0.3px;
}

/* Utility: muted small note */
.small-note{color:#666;font-size:0.9rem}

/* Responsive tweaks */
@media (min-width:768px){
    .container{max-width:720px}
}
@media (min-width:992px){
    .container{max-width:960px}
}

/* Fallback for CSS darken() function if not available: ensure hover still uses secondary color via inline styles in layout where needed */

/* Isotype placement: keep it visually at the top-left edge and avoid overlapping toggler/content */
header{position:relative}
.navbar-brand.isotype{position:absolute;left:8px;top:6px;display:flex;align-items:center;padding:0}
.navbar-brand.isotype img{height:44px;display:block}

/* On larger screens add left padding to container so content doesn't overlap the absolute-brand */
@media (min-width:768px){
    header .container{padding-left:88px}
}

/* On small screens, move the toggler right so it doesn't overlap the isotype */
@media (max-width:767.98px){
    .navbar-toggler{margin-left:64px}
}

    /* Animal picker selected state */
    #animalPicker .selection-item .p-2{transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease}
    #animalPicker .selection-item.selected .p-2{
        background: var(--color-primary);
        color: #fff;
        transform: translateY(-6px);
        box-shadow: 0 12px 28px rgba(255,106,0,0.18);
        border: 2px solid rgba(0,0,0,0.06);
    }
    #animalPicker .selection-item .small{color:inherit}

    /* modal digit selected style */
    .modal-digit-item.selected{background: var(--color-primary); color:#fff; border-color: var(--color-primary);}