@charset "utf-8";
/* CSS Document */

body {
  background: #0f0400 url('images/background.jpg') no-repeat top left;
  margin: 0px;
  padding: 0px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  color: #373737;
}

#page {
  width: 780px;
  margin: auto;
}

#header-link {
  display: block;
  /* para que ocupe todo el ancho */
  text-decoration: none;
  /* quitar subrayado de enlace si tiene texto (aunque no hay) */
}

#header {
  width: 100%;
  height: 200px;
  /* altura del header */
  background-image: url('images/logo.png');
  background-size: cover;
  background-position: center;
  transition: transform 0.3s, filter 0.3s;
  /* para efectos al hover */
}

#header-link:hover #header {
  filter: brightness(0.8);
  /* oscurecer al pasar mouse */
  transform: scale(1.02);
  /* ligero zoom */
}

#tabs {
  width: 580px;
  height: 32px;
  background: url('images/tabs-bg.png') no-repeat;
  float: left;
  padding-left: 200px;
}

#tabs .tab {
  width: 112px;
  height: 20px;
  background: url('images/tab.png') no-repeat;
  float: left;
  text-align: center;
  color: #E2E2E2;
  font-weight: bold;
  padding-top: 12px;
  cursor: pointer;
}

#tabs .tab:hover {
  text-decoration: underline;
}

#tabs .tab-active {
  width: 113px;
  height: 22px;
  background: url('images/tab-active.png') no-repeat;
  float: left;
  text-align: center;
  color: #FFFFFF;
  font-weight: bold;
  padding-top: 10px;
  cursor: pointer;
}

#mainsubmenu {
  width: 760px;
  height: 42px;
  background: url('images/submenu.png') no-repeat;
  float: left;
  padding-left: 10px;
  padding-right: 10px;
}

#mainsubmenu a {
  display: block;
  float: left;
  padding: 5px;
  color: #FFFFFF;
  font-weight: bold;
  margin-top: 7px;
  text-decoration: none;
}

#mainsubmenu a:hover {
  text-decoration: underline;
}

#mainsubmenu .separator {
  width: 2px;
  height: 32px;
  display: block;
  float: left;
  background: url('images/separator.png') no-repeat;
}

#content {
  width: 780px;
  background: url('images/site-bg.png') repeat-y;
  float: left;
}

#margins {
  width: 760px;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 5px;
  margin-bottom: 5px;
}

#content-bot {
  width: 780px;
  height: 28px;
  background: url('images/site-bot.png') no-repeat;
  float: left;
}

#copyrights {
  width: 740px;
  padding: 10px;
  float: left;
  text-align: center;
}

#news-submenu,
#account-submenu,
#community-submenu,
#library-submenu,
#shops-submenu {
  display: none;
}

a {
  color: #990000;
  text-decoration: none;
  font-weight: bold;
}

a:hover {
  color: #FF0000;
}

.white,
.whites {
  color: #FFFFFF;
}










/** -------------------------------
 *  Stylesheet declarations for the
 *  NEW TABLES
 *  -------------------------------
 */

.TableContainer {
  border: 1px solid #d0cdb4;
  position: relative;
  width: 100%;
  font-size: 10px;
}

.TableContainer .Odd {
  background-color: #e5e3d7;
}

.TableContainer .Even {
  background-color: #d0cdb4;
}

/* TABLEHEADER DECORATION */
.TableContainer .CaptionContainer {
  position: relative;
  font-size: 10pt;
  background-color: #afab89 !important;
  height: 100%;
  width: 100%;
  text-align: left;
}

.TableContainer .CaptionContainer .CaptionInnerContainer {
  position: relative;
  background-color: #afab89;
  width: 100%;
  height: 100%;
  padding-top: 3px;
  padding-bottom: 4px;
}

.TableContainer .CaptionContainer .Text {
  font-family: Verdana, Arial, Times New Roman, sans-serif;
  font-size: 10pt;
  font-weight: bold;
  text-align: left;
  color: white;
  padding-left: 10px;
  padding-top: 0px;
  padding-bottom: 0px;
}

.TableContainer .CaptionContainer .CaptionEdgeLeftTop {
  position: absolute;
  width: 5px;
  height: 5px;
  top: -2px;
  left: -2px;
  z-index: 50;
}

.TableContainer .CaptionContainer .CaptionEdgeRightTop {
  position: absolute;
  width: 5px;
  height: 5px;
  top: -2px;
  right: -2px;
  z-index: 50;
}

.TableContainer .CaptionContainer .CaptionEdgeLeftBottom {
  position: absolute;
  width: 5px;
  height: 5px;
  left: -2px;
  bottom: -3px;
  z-index: 50;
}

.TableContainer .CaptionContainer .CaptionEdgeRightBottom {
  position: absolute;
  width: 5px;
  height: 5px;
  right: -2px;
  bottom: -3px;
  z-index: 50;
}

.TableContainer .CaptionContainer .CaptionBorderTop {
  position: absolute;
  width: 100%;
  height: 4px;
  left: 0px;
  top: -1px;
}

.TableContainer .CaptionContainer .CaptionBorderBottom {
  position: absolute;
  width: 100%;
  height: 4px;
  left: 0px;
  bottom: -2px;
}

.TableContainer .CaptionContainer .CaptionVerticalLeft {
  position: absolute;
  height: 100%;
  width: 3px;
  left: -1px;
  top: 0px;
}

.TableContainer .CaptionContainer .CaptionVerticalRight {
  position: absolute;
  height: 100%;
  width: 3px;
  right: -1px;
  top: 0px;
}

* html .TableContainer .CaptionContainer .CaptionEdgeRightTop {
  right: -3px;
}

* html .TableContainer .CaptionContainer .CaptionEdgeLeftBottom {
  bottom: -4px;
}

* html .TableContainer .CaptionContainer .CaptionEdgeRightBottom {
  right: -3px;
  bottom: -4px;
}

* html .TableContainer .CaptionContainer .CaptionBorderBottom {
  bottom: -3;
}

* html .TableContainer .CaptionContainer .CaptionVerticalRight {
  right: -2px;
}

/* TABLE CONTENT */
.TableContentContainer {
  border: 1px solid #afab89;
  position: relative;
  margin-right: 4px;
  height: 100%;
  background-color: #d0cdb4;
  padding: 0px;
}

.TableContent {
  width: 100%;
  border-collapse: collapse;
}

.TableContent td {
  padding-left: 5px;
  padding-top: 2px;
  padding-right: 5px;
  padding-bottom: 2px;
}

/* INNERLYOUT 1 */
.TableContainer .Table1 {
  width: 100%;
  background-color: #d0cdb4;
  border: 2px solid #afab89;
}

.TableContainer .Table1 .InnerTableContainer {
  padding: 5px;
}

/* INNERLYOUT 2 */
.TableContainer .Table2 {
  width: 100%;
  border: 2px solid #afab89;
  background-color: #e5e3d7;
  padding: 0px;
  margin: 0px;
  border-collapse: collapse;
}

.TableContainer .Table2 td {
  padding: 0px;
  margin: 0px;
}

.TableContainer .Table2 .InnerTableContainer {
  margin-top: 1px;
}

.TableContainer .Table2 .InnerTableContainer table {
  border-collapse: collapse;
}

.TableContainer .Table2 .InnerTableContainer td {
  padding-top: 2px;
  padding-left: 5px;
  padding-bottom: 2px;
  padding-right: 5px;
  border: 1px solid #e5e3d7;
}

/* INNERLYOUT 3 */
.TableContainer .Table3 {
  width: 100%;
  border: 2px solid #afab89;
  background-color: #e5e3d7;
}

.TableContainer .Table3 .InnerTableContainer {
  width: 100%;
  position: relative;
  margin-top: 5px;
  margin-left: 3px;
}

.TableContainer .Table3 .TableContentAndRightShadow td {
  border: 1px solid #e5e3d7;
}

/* INNERLYOUT 4 */
.TableContainer .Table4 {
  width: 100%;
  border: 2px solid #afab89;
  background-color: #e5e3d7;
}

.TableContainer .Table4 .InnerTableContainer {
  width: 100%;
  position: relative;
  margin-top: 3px;
}

.TableContainer .Table4 .TableContentAndRightShadow .TableContent td {
  padding-left: 4px;
  padding-top: 2px;
  padding-bottom: 2px;
}

/* INNERLYOUT 5 */
.TableContainer .Table5 {
  width: 100%;
  border: 2px solid #afab89;
  background-color: #e5e3d7;
}

.TableContainer .Table5 .InnerTableContainer {
  width: 100%;
  position: relative;
  margin-top: 5px;
  margin-left: 3px;
}

.TableContainer .Table5 .TableContentAndRightShadow .TableContent td {
  padding-left: 4px;
  padding-top: 2px;
  padding-bottom: 2px;
}

/* SHADOWS */
.TableShadowContainerRightTop {
  position: relative;
  top: 0px;
  right: 3px;
  margin-right: 0px;
  font-size: 10px;
  float: right;
  z-index: 99;
}

.TableShadowRightTop {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 4px;
  height: 5px;
  z-index: 99;
}

.TableContentAndRightShadow {
  position: relative;
  background-repeat: repeat-y;
  background-position: top right;
  margin-right: 3px;
  font-size: 10px;
}

.TableShadowContainer {
  position: relative;
  width: 100%;
  margin-right: 5px;
}

.TableBottomShadow {
  position: relative;
  font-size: 10px;
  height: 5px;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.TableBottomLeftShadow {
  position: relative;
  height: 5px;
  width: 4px;
  float: left;
  padding: 0px;
  margin: 0px;
}

.TableBottomRightShadow {
  position: relative;
  float: right;
  right: -2px;
  top: 0px;
  height: 5px;
  width: 4px;
}

/* LABELS */
.LabelV {
  font-weight: bold;
  padding-right: 10px;
  white-space: nowrap;
  vertical-align: top;
}

.LabelV120 {
  font-weight: bold;
  padding-right: 10px;
  white-space: nowrap;
  vertical-align: top;
  width: 120px;
}

.LabelV150 {
  font-weight: bold;
  padding-right: 10px;
  white-space: nowrap;
  vertical-align: top;
  width: 150px;
}

.LabelV200 {
  font-weight: bold;
  padding-right: 10px;
  white-space: nowrap;
  vertical-align: top;
  width: 200px;
}

.LabelH {
  font-weight: bold;
  padding-right: 10px;
  white-space: nowrap;
  background-color: #afab89;

}

.LabelH td {
  background-color: #afab89;
  padding-left: 5px;
  padding-top: 2px;
  padding-right: 5px;
  padding-bottom: 2px;
}


.BigButton {
  position: relative;
  width: 135px;
  height: 25px;
  z-index: 10;
}

.BigButtonOver {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 137px;
  height: 25px;
  visibility: hidden;
  z-index: 15;
}

.ButtonText {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 25px;
  width: 135px;
  z-index: 20;
}

.TopButtonContainer {
  position: relative;
  right: 4px;
  top: 4px;
  z-index: 60;
}

* html .TopButtonContainer {
  right: 27px;
}

.TopButtonContainer .TopButton {
  position: absolute;
  right: 0px;
  z-index: 55;
}

.Content .BoxContent .Odd {
  background-color: #d0cdb4;
  padding: 2px;
}

.Content .BoxContent .Even {
  background-color: #e5e3d7;
  padding: 2px;
}

.Content .NewsCategoryIconSmall {
  position: absolute;
  top: 1px;
  left: 1px;
  height: 16px;
  width: 16px;
  background-repeat: no-repeat;
}

.Content .BoxContent .Odd {
  background-color: #d0cdb4;
  padding: 2px;
}

.Content .BoxContent .Even {
  background-color: #e5e3d7;
  padding: 2px;
}

.Content .NewsCategoryIconSmall {
  position: absolute;
  top: 1px;
  left: 1px;
  height: 16px;
  width: 16px;
  background-repeat: no-repeat;
}

.Content .BoxContent .Odd {
  background-color: #d0cdb4;
  padding: 2px;
}

.Content .BoxContent .Even {
  background-color: #e5e3d7;
  padding: 2px;
}

.Content .NewsCategoryIconSmall {
  position: absolute;
  top: 1px;
  left: 1px;
  height: 16px;
  width: 16px;
  background-repeat: no-repeat;
}

/* News Ticker */

.Content #NewsTicker .BoxContent {
  padding: 5px;
  min-height: 90px;
  height: auto !important;
  height: 100px;
}

.Content #NewsTicker .BoxContent .Row {
  position: relative;
  width: 100%;
}

.Content #NewsTicker .NewsTickerIcon {
  position: absolute;
  top: 1px;
  left: 1px;
  height: 16px;
  width: 16px;
  background-repeat: no-repeat;
}

.Content #NewsTicker .NewsTickerText {
  font-size: 9pt;
  position: relative;
  margin-left: 20px;
}

.Content #NewsTicker .NewsTickerDate {
  font-size: 7pt;
  position: absolute;
  top: 0px;
  float: left;
}

.Content #NewsTicker .NewsTickerShortText {
  margin-left: 85px;
  height: 14px;
}

.Content #NewsTicker .NewsTickerFullText {
  margin-left: 85px;
  margin-right: 20px;
  display: none;
}

.Content #NewsTicker .NewsTickerExtend {
  position: relative;
  right: 0px;
  top: 1px;
  right: 1px;
  height: 12px;
  width: 12px;
  background-repeat: no-repeat;
  float: right;
  cursor: pointer;
  z-index: 10;
}

/* Featured Article */

.Content #FeaturedArticle .BoxContent {
  position: relative;
  height: 100px;
  padding: 5px;
  padding-left: 10px;
  min-height: 100px;
  height: auto !important;
  height: 110px;
  line-height: 10.5pt;
}

.Content #FeaturedArticle #TeaserThumbnail {
  position: relative;
  top: 0px;
  right: 0px;
  height: 100px;
  width: 150px;
  margin-left: 10px;
  background-color: black;
  z-index: 90;
  float: right;
}

#ContentHelper #FeaturedArticle:first-child .BoxContent {
  padding: 10px;
}

.Content #FeaturedArticle #TeaserText {
  height: 100px;
  overflow: hidden;
  z-index: 0;
}

.Content #FeaturedArticle #Link {
  position: absolute;
  top: 0px;
  right: 0px;
  margin: 89 165 0 0;
  z-index: 99;
}

.Content #FeaturedArticle .NewsHeadlineBackground {
  position: relative;
  height: 28px;
  margin-bottom: 5px;
  background-repeat: repeat-x;
  border-left: 1px solid #d0cdb4;
  border-right: 1px solid #d0cdb4;
}

.Content #FeaturedArticle .NewsHeadlineIcon {
  position: absolute;
  top: -1px;
  left: 0px;
  margin-left: 5px;
  margin-right: 5px;
  float: left;
}

.Content #FeaturedArticle .NewsHeadlineDate {
  font-size: 7pt;
  position: absolute;
  top: 9px;
  left: 50px;
  width: 85px;
  color: white;
}

.Content #FeaturedArticle .NewsHeadlineText {
  position: relative;
  top: 8px;
  left: 135px;
  font-size: 10pt;
  font-weight: bold;
  color: white;
}

/* News */

.Content #News .BoxContent {
  min-height: 100px;
  height: auto !important;
  height: 110px;
}

.Content #News .NewsHeadlineBackground {
  position: relative;
  height: 28px;
  margin-bottom: 5px;
  background-repeat: repeat-x;
  border-left: 1px solid #d0cdb4;
  border-right: 1px solid #d0cdb4;
}

.Content #News .NewsHeadlineIcon {
  position: absolute;
  top: -1px;
  left: 0px;
  margin-left: 5px;
  margin-right: 5px;
}

.Content #News .NewsHeadlineDate {
  font-size: 7pt;
  position: absolute;
  top: 10px;
  left: 50px;
  width: 85px;
  color: white;
}

.Content #News .NewsHeadlineText {
  position: relative;
  top: 7px;
  left: 135px;
  font-size: 10pt;
  font-weight: bold;
  color: white;
}

.Content #News .NewsHeadlineAuthor {
  position: absolute;
  top: 7px;
  right: 10px;
  font-size: 10pt;
  font-weight: bold;
  color: white;
}

/* News Archive */

.Content #NewsArchive .NewsHeadlineBackground {
  position: relative;
  height: 28px;
  margin-bottom: 5px;
  background-repeat: repeat-x;
  border-left: 1px solid #d0cdb4;
  border-right: 1px solid #d0cdb4;
}

.Content #NewsArchive .NewsHeadlineIcon {
  position: absolute;
  top: -1px;
  left: 0px;
  margin-left: 5px;
  margin-right: 5px;
}

.Content #NewsArchive .NewsHeadlineDate {
  font-size: 7pt;
  position: absolute;
  top: 9px;
  left: 50px;
  width: 85px;
  color: white;
}

.Content #NewsArchive .NewsHeadlineText {
  position: relative;
  top: 7px;
  left: 135px;
  font-size: 10pt;
  font-weight: bold;
  color: white;
}

/** --------------------------------------
 *  ### not final versions for tests
 *  ### concerning the new payment process
 *  --------------------------------------
 */

/* new error handling concept tests */

.FormFieldError {
  font-size: 8pt;
  color: red;
}

.SmallBox {
  position: relative;
  font-size: 1px;
}

.SmallBox .ErrorMessage {
  font-size: 8pt;
  position: relative;
  color: red;
  height: 100%;
  background-color: #d0cdb4;
  padding: 5px;
  padding-left: 43px;
}

.SmallBox .Message {
  font-size: 10pt;
  position: relative;
  height: 100%;
  background-color: #d0cdb4;
  padding: 10px;
}

.SmallBox .ErrorMessage ul {
  padding-left: 15px;
}

.SmallBox .BoxFrameHorizontal {
  position: relative;
  height: 4px;
}

.SmallBox .BoxFrameVerticalRight {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 3px;
  background-repeat: repeat-y;
  height: 100%;
}

.SmallBox .BoxFrameVerticalLeft {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 3px;
  background-repeat: repeat-y;
  height: 100%;
}

.SmallBox .MessageContainer {
  position: relative;
  height: 100%;
}

.SmallBox .BoxFrameEdgeLeftTop {
  position: absolute;
  left: -1px;
  top: -1px;
  width: 5px;
  height: 5px;
}

.SmallBox .BoxFrameEdgeLeftBottom {
  position: absolute;
  left: -1px;
  bottom: -1px;
  width: 5px;
  height: 5px;
}

.SmallBox .BoxFrameEdgeRightTop {
  position: absolute;
  right: -1px;
  top: -1px;
  width: 5px;
  height: 5px;
}

.SmallBox .BoxFrameEdgeRightBottom {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 5px;
  height: 5px;
}

.SmallBox .AttentionSign {
  position: absolute;
  top: 3px;
  left: 8px;
  width: 30px;
  height: 26px;
}


/* ------------------------------------- */
/* 1. ESTILOS DE ESTRUCTURA BASE (Existente) */
/* ------------------------------------- */

.login-section {

  max-width: 100%;
}

.login-form-container {
  padding-left: 2rem;
  padding-right: 2rem;
  overflow: hidden;
}

.login-form-container .form-header h1 {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0.3em;
}






.form-header {
  background-color: #afab89;
  color: #ffffff;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  font-size: 1.1rem;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

/* Simular .form-body padding directamente en el form */
#createaccount {
  padding: 15px;
  padding-bottom: 10px;
  /* Consistencia con el original */
}


/* ------------------------------------- */
/* 2. ESTILOS ESENCIALES DE CAMPOS FALTANTES */
/* ------------------------------------- */

/* Estilo para cada grupo de campo */
.form-group {
  margin-bottom: 1.25rem;
  /* Espaciado entre grupos */
}

/* Estilo para las etiquetas */
.form-group label,
.form-group .label-text {
  display: block;
  font-weight: bold;
  color: #373737;
  margin-bottom: 5px;
  font-size: 0.9rem;
}

/* Estilo base para todos los inputs y selects */
.form-group input:not([type="radio"]):not([type="checkbox"]),
.form-group select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #d0cdb4;
  border-radius: 4px;
  background-color: #ffffff;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  /* Fundamental para que el width: 100% funcione con padding */
  transition: border-color 0.2s ease;
}

/* Estilos de focus para accesibilidad */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: #7d795b;
  outline: none;
  box-shadow: 0 0 0 2px rgba(125, 121, 91, 0.2);
}

/* ------------------------------------- */
/* 3. TUS NUEVOS ESTILOS DE ESTRUCTURA SEMÁNTICA (Ajustados) */
/* ------------------------------------- */

.form-section {
  border: 1px solid #afab89;
  border-radius: 6px;
  padding: 1.25rem;
  background: #faf9f5;
  /* Quitar el border y padding por defecto de fieldset */
  border: none;
  padding: 0;
  margin: 0;
}

/* Contenido dentro del fieldset (donde aplicamos el estilo visual) */
.section-content {
  border: 1px solid #afab89;
  /* Borde visual */
  border-radius: 6px;
  padding: 1.25rem;

  background: #faf9f5;
  box-shadow: 0 2px 4px rgba(175, 171, 137, 0.1);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.section-title {
  font-weight: 600;
  font-size: 1rem;
  font-weight: bold;
  color: #373737;
  margin-bottom: 0.5rem;
  /* Ajustado para estar fuera del section-content */
  padding: 0 5px;
  /* Pequeño padding para visualización de legend */
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
}




/* ------------------------------------- */
/* 4. ESTILOS DE AYUDA Y ERRORES (Ajustados) */
/* ------------------------------------- */

.form-help {
  font-size: 0.8rem;
  color: #7d795b;
  margin-top: 4px;
  line-height: 1.4;
}

.required {
  color: #a04441;
}

/* **IMPORTANTE: Si usas el Twig refactorizado, quita el :after global.** Si se mantiene, se duplica el asterisco con la clase `.required`.
   Lo ideal es dejar solo el span `.required` en el Twig. */

.form-error {
  color: #a04441;
  font-size: 0.8rem;
  margin-top: 5px;
  display: block;
  font-weight: bold;
}

/* ------------------------------------- */
/* 5. GRUPOS ESPECÍFICOS (Radio, Checkbox, Password Toggle) */
/* ------------------------------------- */

/* Grupo de género (Radio) */
.gender-label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: #373737;
  font-size: 0.9rem;
}

.radio-group {
  display: flex;
  gap: 20px;
  margin-top: 5px;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Contenedor de password con toggle */
.password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.password-wrapper input {
  width: 100%;
  padding-right: 45px;
}

.toggle-password {
  position: absolute;
  right: 10px;
  height: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 5px;
  border-radius: 3px;
  color: #7d795b;
  display: flex;
  align-items: center;
  font-size: 1.1rem;

}

.toggle-password:hover {
  background-color: #e5e3d7;
}

/* ------------------------------------- */
/* 6. BOTÓN Y ACCIONES */
/* ------------------------------------- */

.form-actions {
  display: flex;
  flex-direction: column;
  /* Apila el botón y el enlace */
  align-items: center;
  /* Centra los elementos */
  gap: 15px;
  /* Espacio entre el botón y el enlace */
  /* El ancho del 100% ya lo dan los elementos internos */
}

.btn-primary {
  width: 100%;
  padding: 12px 10px;
  border: none;
  border-radius: 4px;
  background: linear-gradient(to bottom, #afab89, #9a9678);
  color: #ffffff !important;
  border: 1px solid #7d795b;
  box-shadow: 0 3px 0 #7d795b;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.btn-primary:hover {
  background: linear-gradient(to bottom, #9a9678, #7d795b);
  box-shadow: 0 2px 0 #5c5942;
  transform: translateY(1px);
}

.btn-primary:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #5c5942;
}

/* ------------------------------------- */
/* 7. ACCESIBILIDAD Y RESPONSIVE */
/* ------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

@media (max-width: 500px) {
  .section-content {
    padding: 1rem;
  }

  /* Restaurar el espaciado interno del form para móviles */
  #createaccount {
    padding: 10px;
  }

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

  .radio-group {
    flex-direction: column;
    gap: 10px;
  }

  .form-actions {
    padding-top: 1rem;
  }
}

/* ------------------------------------- */
/* 8. COMPATIBILIDAD CON HOOKS EXISTENTES */
/* ------------------------------------- */

/* Asegurar que los hooks mantengan espaciado */
.form-body>*:not(.form-section) {
  margin-bottom: 1.25rem;
}

/* Contenedor de password con toggle */
.password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.password-wrapper input {
  padding-right: 45px;
  width: 100%;
}

.toggle-password {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  border-radius: 3px;
  color: #7d795b;
}

.toggle-password:hover {
  background-color: #e5e3d7;
}

/* Añadir esto a tu bloque <style> */
.input-with-button {
  display: flex;
  gap: 10px;
  /* Espacio entre el campo y el botón */
}

.input-with-button input[type="text"] {
  flex-grow: 1;
  /* Permite que el input ocupe el espacio restante */
  min-width: 0;
  /* Asegura el correcto encogimiento en móviles */
}

/* Puedes ajustar el estilo del botón si lo deseas */
#generate_name_button {
  /* Estilos para el botón de generación de nombre */
  white-space: nowrap;
  /* Evita que el texto del botón se rompa */
}

.btn-secondary {
  /* Coherencia con .btn-primary */
  padding: 12px 10px;
  /* Mismo padding para igualar altura base */
  border-radius: 4px;
  cursor: pointer;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  transition: all 0.2s ease;
  box-sizing: border-box;
  /* IMPRESCINDIBLE para igualar el <button> */

  /* Colores Secundarios */
  background-color: #ffffff;
  /* Fondo blanco */
  border: 1px solid #7d795b;
  /* Borde oscuro del tema */
  color: #5c5942;
  /* Texto oscuro del tema */
  box-shadow: 0 2px 0 rgba(125, 121, 91, 0.4);
  /* Sombra sutil */

  /* Centrado de texto para <a> */
  display: inline-flex;
  align-items: center;
  /* Centrado vertical */
  justify-content: center;
  /* Centrado horizontal (opcional) */

  /* Ajuste de línea para que funcione correctamente con padding en <a> */
  line-height: 1;
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: #e5e3d7;
  /* Ligeramente más oscuro al pasar el ratón */
  border-color: #5c5942;
  box-shadow: 0 1px 0 rgba(125, 121, 91, 0.4);
  transform: translateY(1px);
}

.btn-secondary:active {
  transform: translateY(2px);
  box-shadow: none;
}

.checkbox-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.has-error {
  border-color: #dc3545;
  background-color: #fff8f8;
}

.login-section .form-header .form-subtitle {
  /* Color: Marrón claro/gris-blanco (Greige) */
  color: #D5C9B0;

  /* Tamaño de Fuente: Reducido para que parezca un subtítulo */
  font-size: 0.9em;
  /* Ajusta este valor (ej. 14px, 0.9em) */

  /* Peso de Fuente: Opcional, para hacerlo más o menos fino */
  font-weight: normal;

  /* Margen: Opcional, para separarlo del H1 */
  margin-top: -10px;

}


.login-section .form-header h1 {
  /* Define el margen superior deseado. 
       CERO elimina cualquier margen por defecto. 
       Usa un valor negativo para forzarlo a subir más si es necesario. */
  margin-top: 0;
  margin-bottom: 0.25rem;
  /* O prueba con un valor pequeño, ej: 10px */
}

.form-help-links br {
  display: block;
  content: "";
  /* Necesario para que el margen funcione en algunos navegadores */
  margin-bottom: 5px;
  /* Pequeño margen después del salto de línea */
}

.sex-icon-label {
  font-size: 2rem;
  /* Aumenta/desciende según necesites */
  line-height: 1;
  cursor: pointer;
}

.sex-icon-label {
  font-size: 20px !important;
  line-height: 1;
}

.sex-icon-label:hover {
  transform: scale(1.15);
  transition: transform 0.1s ease;
}


/* Contenedor general */
#account-manage {
  width: 100%;
  margin: auto;
  padding: 10px;
}

/* Sidebar del menú */
.account-sidebar {
  width: 150px;
  float: left;
}

/* Contenido principal */
.account-main-content {
  margin-left: 150px;
  padding-left: 10px;
}

/* Menú lateral */
.vertical-menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* SÓLO TEXTO PARA LECTORES DE PANTALLA */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}


/* GROUP DE BOTONES (CREATE, DELETE, ETC.) */
.character-action-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 15px;
}


.text-center {
  text-align: center;
}


/* TABLAS DE CUENTA Y PERSONAJES */
table[role="presentation"],
table[role="table"] {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

table th {
  text-align: left;
  padding: 6px;
}

table td {
  padding: 6px;
}

/* ESPACIADO ENTRE SECCIONES */
section {
  margin-bottom: 25px;
}

input[type="text"],
input[type="password"],
input[type="email"],
select {
  padding: 6px;
  border: 1px solid #CCC;
  border-radius: 4px;
  min-width: 200px;
}

/* Menú lateral */
.vertical-menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.action-buttons-group {
  display: flex;
  /* Habilita Flexbox */
  justify-content: center;
  /* Centra los botones horizontalmente */
  gap: 15px;
  /* Espacio entre los botones */
  margin-top: 20px;
  /* Espacio superior para separarlo del formulario */
  padding-top: 15px;
  /* Padding interno para separar los botones del borde visual del formulario */
  padding-bottom: 10px;
  /* Padding interno */
  padding-left: 20px;
  /* Padding interno */
  padding-right: 20px;
}

/* --- EN LA SECCIÓN 6: BOTÓN Y ACCIONES --- */

/* Aplicamos los estilos visualmente fuertes al botón de submit */
.button-submit {
  /* Quitamos el 100% de ancho para que se mantenga en línea con Flexbox */
  /* width: 100%; <- ELIMINAR O COMENTAR */
  padding: 12px 10px;
  border: none;
  border-radius: 4px;

  /* Colores y efectos del tema principal (simulando {{ config.lightborder }}) */
  background: linear-gradient(to bottom, #afab89, #9a9678);
  color: #ffffff !important;
  border: 1px solid #7d795b;
  box-shadow: 0 3px 0 #7d795b;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);

  cursor: pointer;
  /* Añadimos el cursor para el efecto de mouse */
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  transition: all 0.2s ease;
  box-sizing: border-box;
  /* Necesario para Flexbox: permitir que el botón se ajuste al contenido */
  white-space: nowrap;
}

/* Efectos Hover y Focus (Tomados de .btn-primary) */
.button-submit:hover,
.button-submit:focus {
  background: linear-gradient(to bottom, #9a9678, #7d795b);
  box-shadow: 0 2px 0 #5c5942;
  transform: translateY(1px);
}

.button-submit:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #5c5942;
}



.action-buttons-group .btn-primary,
.action-buttons-group .btn-secondary {
  /* 1. ANULAR el 100% del ancho forzado por .btn-primary */
  width: auto;
  /* 2. HACER que ambos crezcan y ocupen el espacio disponible por igual */
  flex-grow: 1;
  /* 3. Asegura que el texto permanezca centrado en su nuevo ancho */
  text-align: center;
  align-items: center;
  justify-content: center;
}


.change-email-content-padding {
  max-width: 600px;
  padding-left: 20px;
  padding-right: 20px;
}

.form-layout {
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
}

.info-description-text {
  font-size: large;
}

#mainsubmenu>div {
  display: none;
}

.form-container {
  padding: 1.5rem;
  /* margen interno general */
  margin: 1rem auto;
  /* margen externo vertical */
  max-width: 100%;
}

.form-section table tbody tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.form-section table tbody tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.05);
}


.textarea-block {
  /* --- LÍMITES DE TAMAÑO (Crucial) --- */

  /* 1. MÁXIMO ANCHO: Asegura que el ancho nunca exceda el 100% del contenedor padre. */
  max-width: 100%;

  /* 2. MÁXIMA ALTURA: Opcional, pero recomendado para evitar que crezca indefinidamente. 
       Aquí se establece una altura inicial, pero le puedes dar un valor fijo (ej: 400px)
       o un porcentaje si el padre tiene altura definida. */
  max-height: 500px;

  /* 3. ANCHO INICIAL: Ocupa todo el espacio disponible al cargar. */
  width: 100%;

  /* 4. CAJA: Fundamental para que el padding y el borde no rompan el 100% de ancho. */
  box-sizing: border-box;

  /* --- CONTROL DE ARRASTRE --- */

  /* 5. REDIMENSIONAMIENTO: Permite al usuario modificar tanto el ancho como el alto. */
  resize: vertical;

  /* 6. DESBORDAMIENTO: Asegura que si el contenido excede la altura visible, aparezcan barras de desplazamiento. */
  overflow: auto;
}


.btn-login {
  width: 100%;
  padding: 12px 10px;
  border: none;
  border-radius: 4px;
  background: linear-gradient(to bottom, #afab89, #9a9678);
  color: #ffffff !important;
  border: 1px solid #7d795b;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  font-weight: bold;
  text-align: center;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.btn-login:hover {
  background: linear-gradient(to bottom, #9a9678, #7d795b);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  transform: translateY(1px);
}

.btn-login:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #5c5942;
}

.login-form-content {
  padding-top: 1.25em;
  padding-left: 1em;
}





/* Estilo para cada grupo de campo */
.login-form-group {
  margin-bottom: 1.25rem;
  display: flex;
  flex-direction: column;
  /* Espaciado entre grupos */
}

/* Estilo para las etiquetas */
.login-form-group label,
.login-form-group .label-text {
  display: block;
  font-weight: bold;
  color: #373737;
  margin-bottom: 5px;
  font-size: 0.9rem;
}

/* Estilos de focus para accesibilidad */
.login-form-group input:focus,
.login-form-group select:focus,
.login-form-group textarea:focus {
  border-color: #7d795b;
  outline: none;
  box-shadow: 0 0 0 2px rgba(125, 121, 91, 0.2);
}