/* @version 1.125 - CLEAN STABLE VERSION */

.sbrhic-main-container {
    --sbrhic-bg: #ffffff;
    --sbrhic-text: #1a1a1a;
    --sbrhic-key-bg: #f2f2f7;
    --sbrhic-key-text: #000000;
    --sbrhic-key-border: #d1d1d6;
    --sbrhic-op-bg: #e5e5ea;
    --sbrhic-sign-bg: #cccccc;
    
    --sbrhi2-modal-bg: rgba(255, 255, 255, 0.95);
    --sbrhi2-text-primary: #000;
    --sbrhi2-tickmarks: #00000033;
    --sbrhic-c2f-color: #E67E22;
    --sbrhic-f2c-color: #2980B9;
	--sbrhic-ok-color: #28a745;
	/* --sbrhic-accent: #4CAF50; */

    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--sbrhic-bg);
    color: var(--sbrhic-text);
    position: relative;
    padding-bottom: env(safe-area-inset-bottom);
}


.sbrhic-main-container.sbrhic-theme-dark {
    --sbrhic-bg: #000; --sbrhic-text: #fff; --sbrhic-key-bg: #1c1c1e; --sbrhic-key-text: #fff;
    --sbrhic-key-border: #38383a; --sbrhic-op-bg: #2c2c2e; --sbrhic-sign-bg: #666;
    --sbrhi2-modal-bg: rgba(20, 20, 20, 0.95); --sbrhi2-text-primary: #fff; --sbrhi2-tickmarks: #ffffff33;
}

@media (prefers-color-scheme: dark) {
    .sbrhic-main-container.sbrhic-theme-system {
        --sbrhic-bg: #000; --sbrhic-text: #fff; --sbrhic-key-bg: #1c1c1e; --sbrhic-key-text: #fff;
        --sbrhic-key-border: #38383a; --sbrhic-op-bg: #2c2c2e; --sbrhic-sign-bg: #666;
        --sbrhi2-modal-bg: rgba(20, 20, 20, 0.95); --sbrhi2-text-primary: #fff; --sbrhi2-tickmarks: #ffffff33;
    }
}

/* SCREEN & PREVIEW */
.sbrhic-screen-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    min-height: 0; /* CRÍTICO: Permite que los hijos se encojan y scrolleen */
    transition: all 0.4s ease;
}
.sbrhic-mode-history .sbrhic-screen-area {
    padding: 20px 20px 30px 20px;
    overflow: hidden; 
}

.sbrhic-main-display {
    font-size: clamp(3rem, 12vh, 5rem); font-weight: 300;
    text-align: right; line-height: 1; cursor: pointer;
}
.sbrhic-defaultvalue { opacity: 0.15; }

.sbrhic-preview-line {
    display: flex; justify-content: flex-end; align-items: center; gap: 12px;
    padding: 15px 0; border-top: 1px solid var(--sbrhic-key-border); font-size: 0.9rem;
}
.sbrhic-preview-ifc, .sbrhic-preview-iff { display: flex; gap: 4px; }
.sbrhic-val-ifc, .sbrhic-val-iff { opacity: .4; }

/* Preview Pseudo-elements */
.sbrhic-val-ifc::after { content: "°C: "; }
.sbrhic-val-iff::after { content: "°F: "; }
.sbrhic-val-c2f::after { content: " °F"; }
.sbrhic-val-f2c::after { content: " °C"; }
.sbrhic-val-c2f { color: var(--sbrhic-c2f-color); font-weight: bold; }
.sbrhic-val-f2c { color: var(--sbrhic-f2c-color); font-weight: bold; }

/* HISTORY BASE */
.sbrhic-history-container {
    flex: 0 1 auto; min-height: 4.5rem; display: flex; flex-direction: column;
    justify-content: flex-end; overflow: visible; 
    mask-image: linear-gradient(to top, black 85%, transparent);
}

.sbrhic-history-line {
    font-size: 1.1rem;
    opacity: 0.5;
    text-align: right;
    border-bottom: 1.5px dashed var(--sbrhic-key-border);
    white-space: nowrap;
    display: flex;
    justify-content: flex-end; /* Números a la derecha */
    align-items: center;
    gap: 0;
    padding: 12px 0;
    cursor: pointer;
    transform: none;
}

.sbrhic-mode-history .sbrhic-history-line { 
    font-size: 1.6rem; 
    opacity: 1; 
    gap: 0;
    /* padding: 22px 0;  */
}

/* Semantic History Colors & Units */
.sbrhic-history-c2f .sbrhic-history-in::after { content: "°C → "; }
.sbrhic-history-c2f .sbrhic-history-out::after { content: " °F"; }
.sbrhic-history-c2f .sbrhic-history-out { color: var(--sbrhic-c2f-color); font-weight: 700; opacity: 1; }
.sbrhic-history-f2c .sbrhic-history-in::after { content: "°F → "; }
.sbrhic-history-f2c .sbrhic-history-out::after { content: " °C"; }
.sbrhic-history-f2c .sbrhic-history-out { color: var(--sbrhic-f2c-color); font-weight: 700; opacity: 1; }
.sbrhic-history-in { opacity: 0.6; }

/* KEYPAD & BUTTONS */
.sbrhic-keypad {
    display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(5, 1fr);
    height: 55vh; background: var(--sbrhic-key-border); gap: 1px; transition: height 0.4s ease;
}

.sbrhic-btn {
    background: var(--sbrhic-key-bg); border: none; color: var(--sbrhic-key-text);
    font-size: 1.5rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.sbrhic-btn:active { background: var(--sbrhic-key-border); }
.sbrhic-btn.sbrhic-op { background: var(--sbrhic-op-bg); font-weight: 500; }
.sbrhic-btn.sbrhic-btn-sign { background: var(--sbrhic-sign-bg); }
.sbrhic-btn-c2f { grid-area: 2 / 4 / span 2 / 5; background: var(--sbrhic-c2f-color) !important; padding: 15px 5px; }
.sbrhic-btn-f2c { grid-area: 4 / 4 / span 2 / 5; background: var(--sbrhic-f2c-color) !important; padding: 15px 5px; }
.sbrhic-btn-zero { grid-area: 5 / 1 / span 1 / 3; }
.sbrhic-btn svg { width: 100%; height: 100%; display: block; pointer-events: none; }

/* MODAL & TOAST */
.sbrhi2-modal {
    position: absolute; top: 60px; right: 20px; z-index: 500; background: var(--sbrhi2-modal-bg);
    padding: 20px; border: 1px solid var(--sbrhi2-tickmarks); border-radius: 12px;
    display: none; width: 240px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.sbrhic-toast-label {
    position: fixed;
    background: var(--sbrhic-ok-color);
    color: white;
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 11px;
    font-weight: 800;
    opacity: 0;
    z-index: 999; /* Por encima de todo, incluso del modal */
    transform: translateX(-100%); 
    transition: opacity 0.15s ease-out;
    pointer-events: none;
}
.sbrhic-toast-visible { opacity: 1; }

/* LIST MODE OVERRIDES */
.sbrhic-mode-history .sbrhic-keypad { height: 0; overflow: hidden; }

.sbrhic-mode-history .sbrhic-main-display {
    font-size: 1.5rem;
    height: 30px;
    opacity: 0.3;
    pointer-events: none;
    margin-top: 10px; /* Separación fija con la línea de preview */
}

.sbrhic-mode-history .sbrhic-history-container {
    flex: 1;
    min-height: 0; /* Permite el scroll interno */
    mask-image: none;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 5px;
    
    /* FIX: Volvemos a flex para mantener alineación al fondo */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}


.sbrhic-copy-all-btn {
    position: absolute;
    bottom: calc(20px + env(safe-area-inset-bottom));
    left: 20px;
    width: calc(50% - 30px);
    background: var(--sbrhic-op-bg);
    color: var(--sbrhic-key-text);
    padding: 12px 18px;
    border-radius: 8px;
    font-weight: bold;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 400;
    font-size: 13px;
    border: 1px solid var(--sbrhic-key-border);
    transition: all 0.2s ease;
    min-width: 110px;
}

/* REPLACING: Return Button (Complete Declaration) */
.sbrhic-return-btn {
    position: absolute;
    bottom: calc(20px + env(safe-area-inset-bottom));
    right: 20px;
    width: calc(50% - 30px);
    background: var(--sbrhic-op-bg);
    color: var(--sbrhic-key-text);
    padding: 12px 18px;
    border-radius: 8px;
    font-weight: bold;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 400;
    font-size: 13px;
    border: 1px solid var(--sbrhic-key-border);
    transition: all 0.2s ease;
}


.sbrhic-copy-all-btn, .sbrhic-return-btn {
    position: absolute;
    bottom: calc(30px + env(safe-area-inset-bottom)); /* Subido de 20px a 30px para despegar del borde */
    background: var(--sbrhic-op-bg);
    color: var(--sbrhic-key-text);
    padding: 12px;
    border-radius: 8px;
    font-weight: bold;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 400;
    font-size: 13px;
    border: 1px solid var(--sbrhic-key-border);
    width: calc(50% - 30px);
}

.sbrhic-copy-all-btn { left: 20px; } 
.sbrhic-return-btn { right: 20px; }
.sbrhic-copy-all-btn.sbrhic-state-copied {
	background: var(--sbrhic-ok-color) !important; color: #fff !important;
}
.sbrhic-copy-all-btn .sbrhic-btn-text-alt { display: none; }
.sbrhic-copy-all-btn.sbrhic-state-copied .sbrhic-btn-text-main { display: none; }
.sbrhic-copy-all-btn.sbrhic-state-copied .sbrhic-btn-text-alt { display: inline; }


.sbrhic-mode-history .sbrhic-return-btn,
.sbrhic-mode-history .sbrhic-copy-all-btn { display: flex; }

/* Individual Copy Button (Circular) */
.sbrhic-copy-btn {
    display: none;
    width: 32px;
    height: 32px;
    background: var(--sbrhic-op-bg);
    color: var(--sbrhic-key-text);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-right: auto; /* EMPUJA EL RESTO A LA DERECHA */
    /* opacity: 0.6; */
    transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    overflow: hidden;
    white-space: nowrap;
    border: 1px solid var(--sbrhic-key-border);
}

.sbrhic-copy-btn.sbrhic-state-copied {
    width: 90px;
    border-radius: 20px;
    background: var( --sbrhic-ok-color ) 
	/* !important */
	;
    color: white
	/* !important */
	;
    opacity: 1;
    font-size: 10px;
    font-weight: 800;
}

.sbrhic-mode-history .sbrhic-copy-btn { display: flex; }

/* ANIMATIONS & FEEDBACK */
.sbrhic-invalid-text { color: #ff3b30 !important; }
.sbrhic-anim-up { animation: sbrhicFlashFade 0.8s ease-in-out forwards; }

@keyframes sbrhicFlashFade {
    0% { transform: translateY(40px); opacity: 0; filter: blur(5px); }
    30% { transform: translateY(0); opacity: 1; filter: blur(0); }
    100% { transform: translateY(0); opacity: 0.5; }
}

/* UTILITY */
.sbrhic-settings-trigger {
    position: absolute; top: env(safe-area-inset-top, 20px); right: 20px;
    cursor: pointer; z-index: 100; width: 24px; height: 24px; opacity: 0.5; color: var(--sbrhic-text);
}


/* Prevención de borde de accesibilidad molesto */
.sbrhic-btn:focus { outline: none; }

/* Estado Activo Genérico (para mouse y teclado) */
.sbrhic-btn.sbrhic-state-active {
    background: var(--sbrhic-key-border) !important;
    transform: scale(0.98);
}

/* Highlight sobre conversión */
.sbrhic-btn-convert.sbrhic-state-active {
    filter: brightness(1.2);
}

/* Estado Deshabilitado (HCI) */
.sbrhic-btn:disabled, 
.sbrhic-btn.sbrhic-state-disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

/* Feedback visual de highlight sobre un disabled (shrug effect) */
.sbrhic-btn.sbrhic-state-shrug {
    animation: sbrhicShrug 0.2s ease-in-out;
}
@keyframes sbrhicShrug {
    0% { transform: translateX(0); }
    25% { transform: translateX(4px); }
    75% { transform: translateX(-4px); }
    100% { transform: translateX(0); }
}