/******************************************************************************
 *
 * File...........: rotor.css
 * Project........: EnigmaJS
 * Descripción....: Estilos del componente rotor (diseño erx-rotor)
 *
 ******************************************************************************/

/*************************************************************/
/* BANDA DE ROTORES                                          */
/*************************************************************/

.rotorBand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Fila de controles sobre los rotores (botón Tapa y Logo) */
.rotorBand-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 8px 6px 8px; /* Un poco más de margen inferior y lateral */
}

.rotorBand-logo {
    height: 100px;
    width: auto;
    opacity: 0.85;
    transition: opacity 0.2s ease, filter 0.2s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    user-select: none;
    pointer-events: none; /* Evita arrastres accidentales del logotipo */
}
.rotorBand:hover .rotorBand-logo {
    opacity: 1; /* Completamente nítido al pasar el ratón */
}

/* Contenedor exterior del interruptor */
.switch-outer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* Etiqueta exterior con fuente más grande */
.switch-outer-title {
    font-family: 'Courier New', Courier, monospace;
    font-size: 10px; /* Fuente un poco más grande y fuera */
    font-weight: bold;
    color: rgba(233, 215, 152, 0.7); /* Latón dorado */
    letter-spacing: 0.8px;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 1px 1px 0px #000;
}

/* Interruptor Cerámico Rotatorio Compacto (Tapa rotores) */
.switch-mini-panel {
    position: relative;
    width: 75px;
    height: 48px; /* Altura compacta adaptada al no tener título interno */
    background: #141312;
    border: 1.5px solid #000;
    border-radius: 6px;
    box-shadow: inset 0 0 6px rgba(0,0,0,0.9), 0 3px 8px rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    user-select: none;
}

/* Contenedor interno para mando y etiquetas */
.switch-mini-panel .switch-area {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Etiquetas ZU / AUF */
.switch-mini-panel .label {
    position: absolute;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    font-size: 8px;
    color: rgba(233, 215, 152, 0.85);
    text-shadow: 1px 1px 0 #000;
}

.switch-mini-panel .label-zu { left: 6px; }
.switch-mini-panel .label-auf { right: 6px; }

/* Base cerámica/metálica */
.switch-mini-panel .switch-base {
    width: 34px;
    height: 34px;
    background: linear-gradient(135deg, #333 0%, #151515 100%);
    border-radius: 50%;
    border: 1px solid #000;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* Mando giratorio de baquelita */
.switch-mini-panel .switch-knob {
    width: 22px;
    height: 22px;
    background: radial-gradient(circle, #2a2a2a 0%, #080808 100%);
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.8);
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.2);
}

/* Línea indicadora dorada/marfil */
.switch-mini-panel .switch-knob::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 11px;
    background: #d8c39d;
    border-radius: 1px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* Posiciones (-45 grados para cerrado ZU, 45 para abierto AUF) */
.switch-mini-panel .switch-knob.state-zu { transform: rotate(-45deg); }
.switch-mini-panel .switch-knob.state-auf { transform: rotate(45deg); }

/*************************************************************/
/* CONTENEDOR DE LOS ROTORES                                 */
/*************************************************************/

.rotorContainer {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 6px;
}

/* Wrapper panel: el aspecto visual lo da .erx-rotor */
.rotorPanel {
    display: inline-block;
}

/*************************************************************/
/* ERX-ROTOR COMPONENT — copiado de enigma_rotor_component_r9.html */
/*************************************************************/

/* Variables con prefijo propio, declaradas en el propio elemento raíz */
.erx-rotor {
    --erx-brass:       #c9a24a;
    --erx-brass-dark:  #7d5f24;
    --erx-brass-light: #f0d488;
    --erx-ink:         #171310;

    display: inline-block;
    position: relative;
    width: fit-content;
    background: var(--color-panel);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 6px;
    padding: 18px 20px;
    box-shadow: inset 0 3px 10px rgba(0,0,0,.7),
                inset 0 -1px 0 rgba(255,255,255,.04);
    font-family: Georgia, 'Times New Roman', serif;
    box-sizing: border-box;
    user-select: none;
}
.erx-rotor * { box-sizing: border-box; }

.erx-rotor__core {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 16px;
}

.erx-rotor__shell-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.erx-rotor__select {
    width: 66px;
    height: 20px;
    margin-bottom: 8px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 11px;
    text-align: center;
    color: #171310;
    background: linear-gradient(180deg, #eef0f2 0%, #c7cbcf 60%, #9aa0a6 100%);
    border: 1px solid #4d4f52;
    border-radius: 2px;
    cursor: pointer;
}

.erx-rotor__shell {
    display: flex;
    align-items: center;
    gap: 16px;
}

.erx-rotor__column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 30px;
}

.erx-rotor__btn {
    width: 30px;
    height: 20px;
    border: none;
    border-radius: 3px;
    background: linear-gradient(180deg,
        var(--erx-brass-light),
        var(--erx-brass) 55%,
        var(--erx-brass-dark));
    color: #241a0e;
    font-size: 10px;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 2px 0 var(--erx-brass-dark), 0 4px 8px rgba(0,0,0,.4);
    flex-shrink: 0;
    padding: 0;
    line-height: 1;
}
.erx-rotor__btn:active {
    transform: translateY(2px);
    box-shadow: none;
}

/* Ventanilla de letras */
.erx-rotor__viewport {
    width: 30px;
    height: 100px;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    border-radius: 2px 0 0 2px;
    background:
        linear-gradient(115deg, transparent 30%, rgba(255,255,255,.4) 46%, transparent 62%),
        repeating-linear-gradient(180deg, rgba(255,255,255,.12) 0 1px, transparent 1px 3px),
        linear-gradient(180deg, #eef0f2 0%, #c7cbcf 38%, #9aa0a6 62%, #6b6f73 100%);
    border: 1px solid #4d4f52;
    border-right: none;
    box-shadow:
        0 2px 6px rgba(0,0,0,.5),
        inset 0 1px 2px rgba(255,255,255,.5),
        inset 0 -2px 4px rgba(0,0,0,.35);
    perspective: 220px;
}

.erx-rotor__barrel {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
}

.erx-rotor__letter {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 32px;
    margin-top: -16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Arial Narrow', Arial, Helvetica, sans-serif;
    font-weight: 800;
    color: var(--erx-ink);
    text-shadow: 0 1px 0 rgba(255,255,255,.35);
    backface-visibility: hidden;
}

/* Rueda dentada lateral (arrastre) */
.erx-rotor__wheel {
    width: 6px;
    height: 206px;
    position: relative;
    cursor: ns-resize;
    touch-action: none;
    background: #4d5054;
    box-shadow: 0 2px 6px rgba(0,0,0,.5);
    overflow: hidden;
}

.erx-rotor__ridges {
    position: absolute;
    left: 0;
    right: 0;
    top: -80px;
    bottom: -80px;
    background-image: repeating-linear-gradient(180deg,
        #4d5054 0px,
        #ffffff 20px,
        #4d5054 30px);
}

.erx-rotor__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(0,0,0,.7) 0%,
        transparent 38%,
        transparent 62%,
        rgba(0,0,0,.7) 100%);
    pointer-events: none;
}

.erx-rotor__tick {
    position: absolute;
    top: 50%;
    left: -5px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top:    4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left:   5px solid var(--erx-brass-light);
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.6));
    z-index: 2;
}

/* Control del anillo (Ringstellung) */
.erx-rotor__ring {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    align-self: center;
}

.erx-rotor__ring-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: 'Courier New', Courier, monospace;
    font-size: 8px;
    letter-spacing: .12em;
    color: rgba(233,223,196,.55);
    white-space: nowrap;
    margin-bottom: 2px;
}

.erx-rotor__ring-btn {
    width: 20px;
    height: 16px;
    border: none;
    border-radius: 2px;
    background: linear-gradient(180deg,
        var(--erx-brass-light),
        var(--erx-brass) 55%,
        var(--erx-brass-dark));
    color: #241a0e;
    font-size: 10px;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 0 var(--erx-brass-dark);
    padding: 0;
    flex-shrink: 0;
}
.erx-rotor__ring-btn:active {
    transform: translateY(1px);
    box-shadow: none;
}

.erx-rotor__ring-display {
    width: 20px;
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    font-size: 10px;
    font-weight: 700;
    color: #171310;
    background: linear-gradient(180deg, #eef0f2 0%, #c7cbcf 60%, #9aa0a6 100%);
    border: 1px solid #4d4f52;
    border-radius: 2px;
    padding: 3px 0;
    flex-shrink: 0;
}

/* Tapa física del rotor */
.erx-rotor__cover {
    position: absolute;
    top: 6px;                /* Subido 6px para cubrir la etiqueta ROTOR */
    left: -10px;
    width: 92px;
    height: 212px;           /* +6px para mantener borde inferior igual */
    z-index: 20;
    border-radius: 4px;
    background: var(--color-panel);
    display: none;
    pointer-events: auto;
    mask-image:
        linear-gradient(#fff, #fff),
        linear-gradient(#fff, #fff);
    mask-size: 100% 100%, 30px 30px;
    mask-position: 0 0, 46px 107px; /* y +6px: viewport a 72px desde cover, center 122px, y=107 */
    mask-repeat: no-repeat, no-repeat;
    mask-composite: exclude;
}

.erx-rotor__cover-plate {
    position: absolute;
    left: 38px;
    top: 64px;
    width: 46px;
    height: 105px;
    border-radius: 50%;
    background: radial-gradient(ellipse at 35% 22%,
        #eef0f2, #b7bbc0 40%, #7a7e82 75%, #525558 100%);
    box-shadow:
        0 2px 4px rgba(0,0,0,.5),
        inset 0 1px 2px rgba(255,255,255,.55),
        inset 0 -2px 4px rgba(0,0,0,.4);
    pointer-events: none;
}

.erx-rotor__cover-screw {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%,
        #e6e8ea, #6b6f73 70%, #34363a 100%);
    box-shadow: inset 0 0 1px rgba(0,0,0,.7), 0 1px 1px rgba(0,0,0,.3);
    pointer-events: none;
}
.erx-rotor__cover-screw--top    { left: 58px; top:  71px; }
.erx-rotor__cover-screw--bottom { left: 58px; top: 156px; }

/* Sombra interior de la ventanilla cuando la tapa está puesta */
.erx-rotor__cover-window-shadow {
    position: absolute;
    left: 36px;
    top: 113px;
    width: 30px;
    height: 30px;
    z-index: 21;
    pointer-events: none;
    display: none;
    border-radius: 1px;
    box-shadow:
        inset 0 6px 6px -3px rgba(0,0,0,.55),
        inset 0 -2px 3px -1px rgba(0,0,0,.25);
}

/* Estado: tapa puesta */
.erx-rotor--covered {
    border-color: transparent;
    box-shadow: none;
}
.erx-rotor--covered .erx-rotor__cover-window-shadow { display: block; }
.erx-rotor--covered .erx-rotor__cover               { display: block; }
.erx-rotor--covered .erx-rotor__select,
.erx-rotor--covered .erx-rotor__ring,
.erx-rotor--covered .erx-rotor__column               { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
    .erx-rotor * { transition: none !important; }
}

/* Etiqueta de tipo sobre el selector del rotor */
.erx-rotor__type-label {
    display: block;
    width: 100%;
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(233, 215, 152, 0.5);
    margin-bottom: 3px;
    white-space: nowrap;
}



/*************************************************************/
/* ERX-REFLECTOR COMPONENT                                   */
/*************************************************************/

.erx-reflector {
    --erx-brass:       #c9a24a;
    --erx-brass-dark:  #7d5f24;
    --erx-brass-light: #f0d488;
    --erx-ink:         #171310;

    display: inline-block;
    position: relative;
    width: fit-content;
    background: var(--color-panel);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 6px;
    padding: 18px 10px;          /* Reducido de 20px a 10px horizontal */
    box-shadow: inset 0 3px 10px rgba(0,0,0,.7),
                inset 0 -1px 0 rgba(255,255,255,.04);
    font-family: Georgia, 'Times New Roman', serif;
    box-sizing: border-box;
    user-select: none;
}
.erx-reflector * { box-sizing: border-box; }

/* Mismo esqueleto que erx-rotor para que la altura sea idéntica */
.erx-reflector__core {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 16px;
}

.erx-reflector__shell-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.erx-reflector__select {
    width: 60px;             /* Ampliado: acomoda nombres como B-THIN, C-THIN */
    height: 20px;
    margin-bottom: 8px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 11px;
    text-align: center;
    color: #171310;
    background: linear-gradient(180deg, #eef0f2 0%, #c7cbcf 60%, #9aa0a6 100%);
    border: 1px solid #4d4f52;
    border-radius: 2px;
    cursor: pointer;
}

.erx-reflector__column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 30px;
}

/* Reflector fijo (militar): mantiene el hueco pero oculta visualmente
   la ventanilla y la rueda para que el componente no cambie de tamaño */
.erx-reflector--fixed .erx-reflector__column,
.erx-reflector--fixed .erx-reflector__wheel {
    visibility: hidden;
}

.erx-reflector__btn {
    width: 30px;
    height: 20px;
    border: none;
    border-radius: 3px;
    background: linear-gradient(180deg,
        var(--erx-brass-light),
        var(--erx-brass) 55%,
        var(--erx-brass-dark));
    color: #241a0e;
    font-size: 10px;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 2px 0 var(--erx-brass-dark), 0 4px 8px rgba(0,0,0,.4);
    flex-shrink: 0;
    padding: 0;
    line-height: 1;
}
.erx-reflector__btn:active {
    transform: translateY(2px);
    box-shadow: none;
}

/* Ventanilla — igual que el rotor pero sin el borde-right eliminado */
.erx-reflector__viewport {
    width: 30px;
    height: 100px;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    border-radius: 2px;
    background:
        linear-gradient(115deg, transparent 30%, rgba(255,255,255,.4) 46%, transparent 62%),
        repeating-linear-gradient(180deg, rgba(255,255,255,.12) 0 1px, transparent 1px 3px),
        linear-gradient(180deg, #eef0f2 0%, #c7cbcf 38%, #9aa0a6 62%, #6b6f73 100%);
    border: 1px solid #4d4f52;
    box-shadow:
        0 2px 6px rgba(0,0,0,.5),
        inset 0 1px 2px rgba(255,255,255,.5),
        inset 0 -2px 4px rgba(0,0,0,.35);
    perspective: 220px;
}

.erx-reflector__barrel {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
}

.erx-reflector__letter {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 32px;
    margin-top: -16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Arial Narrow', Arial, Helvetica, sans-serif;
    font-weight: 800;
    color: var(--erx-ink);
    text-shadow: 0 1px 0 rgba(255,255,255,.35);
    backface-visibility: hidden;
}

/* Rueda dentada — idéntica al rotor */
.erx-reflector__wheel {
    width: 6px;
    height: 206px;
    position: relative;
    cursor: ns-resize;
    touch-action: none;
    background: #4d5054;
    box-shadow: 0 2px 6px rgba(0,0,0,.5);
    overflow: hidden;
}

.erx-reflector__ridges {
    position: absolute;
    left: 0;
    right: 0;
    top: -80px;
    bottom: -80px;
    background-image: repeating-linear-gradient(180deg,
        #4d5054 0px,
        #ffffff 20px,
        #4d5054 30px);
}

.erx-reflector__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(0,0,0,.7) 0%,
        transparent 38%,
        transparent 62%,
        rgba(0,0,0,.7) 100%);
    pointer-events: none;
}

.erx-reflector__tick {
    position: absolute;
    top: 50%;
    left: -5px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top:    4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left:   5px solid var(--erx-brass-light);
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.6));
    z-index: 2;
}

/* Tapa del reflector.
   Cover posicionada relativa al CORE (position:relative), no a erx-reflector.
   Con select 60px:
     column x desde CORE = (60-30)/2 = 15px
     viewport desde cover-left (-6px desde CORE) = 15+6 = 21px  → mask-x=21
     mask-y=101px (igual que rotor: cover-top 12px desde CORE, viewport-y 78px desde CORE,
     viewport-center 128px desde CORE, viewport-center-desde-cover = 116px, y=101) */
.erx-reflector__cover {
    position: absolute;
    top: 6px;                /* Subido 6px para cubrir la etiqueta REFLECTOR */
    left: -6px;
    width: 72px;             /* Cubre select(60px)+margen(12px) */
    height: 212px;           /* +6px para mantener borde inferior igual */
    z-index: 20;
    border-radius: 4px;
    background: var(--color-panel);
    display: none;
    pointer-events: auto;
    mask-image:
        linear-gradient(#fff, #fff),
        linear-gradient(#fff, #fff);
    mask-size: 100% 100%, 30px 30px;
    mask-position: 0 0, 21px 107px;  /* y +6px: viewport a 72px desde cover, center 122px, y=107 */
    mask-repeat: no-repeat, no-repeat;
    mask-composite: exclude;
}

/* Placa: viewport-center desde cover = 21+15=36px; plate-left = 36-23 = 13px */
.erx-reflector__cover-plate {
    position: absolute;
    left: 13px;
    top: 64px;
    width: 46px;
    height: 105px;
    border-radius: 50%;
    background: radial-gradient(ellipse at 35% 22%,
        #eef0f2, #b7bbc0 40%, #7a7e82 75%, #525558 100%);
    box-shadow:
        0 2px 4px rgba(0,0,0,.5),
        inset 0 1px 2px rgba(255,255,255,.55),
        inset 0 -2px 4px rgba(0,0,0,.4);
    pointer-events: none;
}

.erx-reflector__cover-screw {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%,
        #e6e8ea, #6b6f73 70%, #34363a 100%);
    box-shadow: inset 0 0 1px rgba(0,0,0,.7), 0 1px 1px rgba(0,0,0,.3);
    pointer-events: none;
}
/* Tornillos centrados en placa: plate-center = 36px desde cover-left; screw-left = 36-3 = 33px */
.erx-reflector__cover-screw--top    { left: 33px; top:  71px; }
.erx-reflector__cover-screw--bottom { left: 33px; top: 156px; }

/* Sombra de la ventanilla: relativa al CORE (igual que cover).
   x desde CORE = viewport-x = 15px; y desde CORE = cover-top(12) + mask-y(101) = 113px */
.erx-reflector__cover-window-shadow {
    position: absolute;
    left: 15px;
    top: 113px;
    width: 30px;
    height: 30px;
    z-index: 21;
    pointer-events: none;
    display: none;
    border-radius: 1px;
    box-shadow:
        inset 0 6px 6px -3px rgba(0,0,0,.55),
        inset 0 -2px 3px -1px rgba(0,0,0,.25);
}

/* Estado: tapa puesta */
.erx-reflector--covered {
    border-color: transparent;
    box-shadow: none;
}
.erx-reflector--covered .erx-reflector__cover-window-shadow { display: block; }
.erx-reflector--covered .erx-reflector__cover               { display: block; }
.erx-reflector--covered .erx-reflector__select,
.erx-reflector--covered .erx-reflector__column              { pointer-events: none; }

/* Reflector FIJO (militar): tapa limpia sin decoración.
   La placa ovalada y la ventana solo tienen sentido en reflectores
   orientables (comerciales) donde hay una letra de posición que mostrar. */
.erx-reflector--fixed.erx-reflector--covered .erx-reflector__cover-plate,
.erx-reflector--fixed.erx-reflector--covered .erx-reflector__cover-screw,
.erx-reflector--fixed.erx-reflector--covered .erx-reflector__cover-window-shadow {
    display: none;
}
.erx-reflector--fixed .erx-reflector__cover {
    /* Sin ventana recortada: tapa sólida y plana */
    mask-image: none;
}

/* Panel contenedor del reflector */
.reflectorPanel {
    display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
    .erx-reflector * { transition: none !important; }
}

/* Etiqueta de tipo sobre el selector del reflector */
.erx-reflector__type-label {
    display: block;
    width: 100%;
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;  /* Algo más comprimido para "REFLECTOR" */
    text-transform: uppercase;
    color: rgba(233, 215, 152, 0.5);
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: visible;        /* Puede rebosar ligeramente el select */
}

/*************************************************************/
/* ERX-ETW (ENTRY WHEEL) COMPONENT                           */
/*************************************************************/

.erx-etw {
    display: inline-block;
    position: relative;
    width: fit-content;
    background: var(--color-panel);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 6px;
    padding: 18px 10px;
    box-shadow: inset 0 3px 10px rgba(0,0,0,.7),
                inset 0 -1px 0 rgba(255,255,255,.04);
    font-family: Georgia, 'Times New Roman', serif;
    box-sizing: border-box;
    user-select: none;
}
.erx-etw * { box-sizing: border-box; }

.erx-etw__core {
    position: relative;
    display: flex;
    align-items: flex-end;
    height: 206px;  /* Igual que el wheel en los rotores: label queda a ~16px del core-top,
                       cover a top:6px la cubre (igual que erx-rotor y erx-reflector) */
}

.erx-etw__shell-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.erx-etw__type-label {
    display: block;
    width: 100%;
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(233, 215, 152, 0.5);
    margin-bottom: 31px; /* shell-wrap = 11+31+156=198px → flex-end offset 8px = misma altura que ROTOR/REFLECTOR */
    white-space: nowrap;
}

/* Placa metálica vertical grabada */
.erx-etw__plaque {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 26px;
    height: 156px;
    background: radial-gradient(ellipse at 50% 15%, #46494c 0%, #222325 100%);
    border: 1px solid #141517;
    border-radius: 4px;
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,0.08),
        inset 0 -1px 2px rgba(0,0,0,0.5),
        0 2px 4px rgba(0,0,0,0.5);
    padding: 8px 0;
}

.erx-etw__plaque-text {
    font-family: 'Courier New', Courier, monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.35em;
    color: #a9afb5;
    writing-mode: vertical-rl;
    transform: rotate(180deg); /* Lee de abajo hacia arriba, igual que la etiqueta del anillo */
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.9), 0 1px 1px rgba(255, 255, 255, 0.08);
    text-align: center;
}

.erx-etw__plaque-text--commercial {
    color: #c9a24a; /* Brass/Gold text color for K commercial model */
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.9), 0 1px 1px rgba(255, 255, 255, 0.15);
}

.erx-etw__plaque-screw {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #888c90, #3a3b3d 75%, #141516 100%);
    box-shadow: inset 0 0 1px rgba(0,0,0,0.8), 0 1px 1px rgba(0,0,0,0.4);
}

/* Tapa física de ETW.
   left: -4px / width: 34px → margen de 6px desde cada borde interior del componente
   (igual que las tapas de rotor y reflector que se funden con el fondo sin solapar bordes).
   top/height igual que rotores: top:6px, height:212px. */
.erx-etw__cover {
    position: absolute;
    top: 6px;
    left: -4px;
    width: 34px;
    height: 212px;
    z-index: 20;
    border-radius: 3px;
    background: var(--color-panel);
    display: none;
    pointer-events: auto;
}

/* Estado: tapa puesta */
.erx-etw--covered {
    border-color: transparent;
    box-shadow: none;
}
.erx-etw--covered .erx-etw__cover {
    display: block;
}
.erx-etw--covered .erx-etw__plaque {
    pointer-events: none;
}