/* Estilos limitados al acceso y al Centro de Regulación. */
#regulation-entry { background: #0d1728; border: 1px solid #284b7a; border-left: 3px solid #3b82f6; }
#regulation-entry h3 { color: #bfdbfe; margin-bottom: 10px; }
#regulation-entry p { color: #b3c5df; line-height: 1.7; margin-bottom: 16px; }
#regulation-entry button, #regulation-center button { min-height: 44px; max-width: 100%; padding: 10px 15px; border: 1px solid #3b82f6; border-radius: 10px; background: #17325a; color: #dbeafe; font: inherit; line-height: 1.5; white-space: normal; cursor: pointer; overflow-wrap: anywhere; }
#regulation-center { --reader-font-size: 16px; background: #0a1423; border: 1px solid #233d60; padding: clamp(14px, 3vw, 28px); border-radius: 14px; margin-bottom: 24px; color: #e2e8f0; min-width: 0; overflow-wrap: anywhere; }
#regulation-center [hidden], #regulation-entry[hidden] { display: none !important; }
#regulation-center h3 { font-size: 1.3rem; color: #bfdbfe; margin: 18px 0 12px; }
#regulation-center h4 { font-size: 1.1rem; color: #bfdbfe; margin: 18px 0 12px; }
#regulation-center h5 { font-size: 1.05rem; margin: 16px 0 12px; color: #93c5fd; }
#regulation-center p { line-height: 1.75; margin: 12px 0; }
#regulation-center .reg-notice { font-size: 0.82rem; color: #b3c5df; }
#regulation-center .reg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
#regulation-center .reg-grid button { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 10px; padding: 18px; background: #0f1e33; border-color: #315077; }
#regulation-center .reg-grid button span { font-size: 0.85rem; color: #b3c5df; }
#regulation-center .reg-grid svg { width: 26px; height: 26px; stroke: #60a5fa; fill: none; stroke-width: 1.5; }
#regulation-center button:hover:not(:disabled), #regulation-entry button:hover { background: #1e3a5f; }
#regulation-center .reg-secondary { background: #0d1728; border-color: #315077; color: #bfdbfe; }
#regulation-center button:disabled { opacity: 0.45; cursor: default; }
#regulation-center :is(button, textarea, select):focus-visible, #regulation-entry button:focus-visible { outline: 3px solid #93c5fd; outline-offset: 3px; }
#regulation-center .reg-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 8px; }
#regulation-center progress { display: block; width: 100%; height: 8px; accent-color: #3b82f6; }
#regulation-center label { display: block; margin: 14px 0 8px; font-size: 0.9rem; }
#regulation-center textarea, #regulation-center select { width: 100%; max-width: 100%; box-sizing: border-box; border: 1px solid #315077; border-radius: 8px; background: #0d1728; color: #e2e8f0; padding: 12px; font: inherit; }
#regulation-center textarea { resize: vertical; }
#regulation-center #regulation-thought-preview { white-space: pre-wrap; border-left: 3px solid #3b82f6; padding-left: 14px; }
#regulation-center #regulation-surfing-time { font-size: 2.4rem; color: #93c5fd; font-variant-numeric: tabular-nums; text-align: center; }
#regulation-center #regulation-surfing-state { text-align: center; color: #bfdbfe; }
#regulation-center .reg-wave { height: 110px; overflow: hidden; border-radius: 10px; margin-top: 20px; background: #0d1728; }
#regulation-center .reg-wave svg { display: block; width: 100%; height: 100%; overflow: visible; }
#regulation-center .reg-wave path { stroke: #60a5fa; stroke-width: 3; fill: none; animation: reg-wave-flow 8s linear infinite; animation-play-state: paused; }
#regulation-center [data-state="running"] .reg-wave path { animation-play-state: running; }
#regulation-center .reg-wave-note { font-size: 0.76rem; color: #94a3b8; }
#regulation-center .reg-step-enter { animation: reg-step-enter 180ms ease-out; }
#regulation-center #regulation-box-breathing { border: 1px solid #315b91; border-radius: 14px; padding: 14px; margin: 16px 0; }
#regulation-center [id$="box-breath-title"] { display: none; }
#regulation-center .box-breath-intro, #regulation-center .box-breath-live { font-size: 0.82rem; color: #b3c5df; }
#regulation-center .box-breath-live { text-align: center; }
#regulation-center [id$="box-breath-dot"] { fill: #dbeafe; stroke: #3b82f6; stroke-width: 3; }
#regulation-center [id$="box-breath-label"] { font-size: 1rem; font-weight: 700; }
#regulation-center [id$="box-breath-seconds"] { font-size: 2.4rem; line-height: 1.2; color: #93c5fd; }
#regulation-center [id$="box-breath-state"] { font-size: 0.72rem; color: #94a3b8; }
#regulation-center .box-breath-phases { list-style: none; padding: 0; margin: 12px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#regulation-center .box-breath-phases li { padding: 8px; margin: 0; border: 1px solid #233d60; border-radius: 8px; font-size: 0.76rem; color: #b3c5df; }
#regulation-center .box-breath-phases li.is-active { border-color: #60a5fa; background: #142d50; color: #dbeafe; }
@keyframes reg-wave-flow { to { transform: translateX(-25%); } }
@keyframes reg-step-enter { from { opacity: 0.6; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 600px) { #regulation-center .reg-grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { #regulation-center *, #regulation-center *::before, #regulation-center *::after { animation: none !important; transition: none !important; } #regulation-center [id$="box-breath-dot"] { display: none; } }