/* ============================================================================
Mictlan Online — puente entre el tema de la landing y el HTML heredado de
MyAAC (system/pages/*). El tema base (paleta, tipografias, marcos, nav,
footer) lo pone /landing/assets/css/mictlan.css; aqui solo se visten las
clases que genera MyAAC: TableContainer, BigButton, formularios, tablas...
Las variables (--gold, --ink, --font-display...) vienen del CSS de la landing.
========================================================================== */
/* ---------- cuerpo de pagina interior ---------- */
.page-body { background: var(--ink); }
.acctbar {
/* el nav es position:fixed, asi que NO ocupa espacio en el flujo: sin este
margen la barra de cuenta queda debajo del nav y no se ve. */
margin-top: var(--nav-h);
border-bottom: 1px solid rgba(201,162,39,.16);
background: linear-gradient(180deg, rgba(13,15,11,.95), rgba(7,10,4,.95));
font-size: 13px;
}
.acctbar__inner {
display: flex; align-items: center; justify-content: space-between;
gap: 18px; flex-wrap: wrap; padding-top: 11px; padding-bottom: 11px;
}
.acctbar__who { color: var(--text-dim); }
.acctbar__who b { color: var(--gold-light); }
.acctbar__links { display: flex; align-items: center; gap: 22px; }
.acctbar__links a {
font-family: var(--font-display); letter-spacing: .16em; text-transform: uppercase;
font-size: 11.5px; color: var(--text); opacity: .85;
transition: color .18s, opacity .18s;
}
.acctbar__links a:hover { color: var(--gold-light); opacity: 1; }
.acctbar__cta {
padding: 7px 16px; border: 1px solid rgba(201,162,39,.5);
background: linear-gradient(180deg, rgba(38,40,34,.9), rgba(14,16,12,.9));
color: var(--gold-light) !important; opacity: 1 !important;
}
.page {
/* el nav (76px, fijo) + la barra de cuenta (~44px) ya van por encima/delante
gracias a .acctbar{margin-top}, aqui solo queda el respiro del contenido */
padding: 34px 0 70px;
min-height: 60vh;
background:
radial-gradient(120% 70% at 50% 0%, rgba(35,32,24,.35) 0%, transparent 60%),
var(--ink);
}
/* Panel contenedor de todo el contenido de MyAAC.
El marco real (9 piezas que se repiten) y el adorno se definen en el bloque
OVERRIDES del final de este fichero; aqui solo queda lo que no depende del arte. */
.panel {
padding: 6px 14px 16px;
}
/* ---------- contenedores y tablas heredadas de MyAAC ---------- */
.TableContainer, .TableContentContainer, .InnerTableContainer {
width: 100%; border-collapse: collapse;
}
.TableContainer { margin: 0 0 22px; }
.TableContent, .Content {
color: var(--text); font-size: 15px; line-height: 1.65;
padding: 14px 16px;
background: rgba(0,0,0,.22);
border: 1px solid rgba(201,162,39,.18);
}
.Content { border: 0; background: none; padding: 0; }
.InnerTableContainer .TableContent { background: none; border: 0; }
/* Las "sombras" y esquinas del template viejo no pintan nada aqui */
.TableShadowContainer, .TableShadowContainerRightTop, .TableShadowRightTop,
.TableContentAndRightShadow, .TableBottomShadow, .TableBottomLeftShadow,
.TableBottomRightShadow, .CornerWrapper-b, .Corner-tl, .Corner-tr,
.Corner-bl, .Corner-br, .Border_1, .Border_2, .Border_3,
.CaptionEdgeLeftTop, .CaptionEdgeRightTop, .CaptionEdgeLeftBottom,
.CaptionEdgeRightBottom, .CaptionVerticalLeft, .CaptionVerticalRight,
.CaptionBorderTop, .CaptionBorderBottom, .CaptionContainer,
.CaptionInnerContainer, .browsehappy { background-image: none !important; border: 0 !important; }
/* Tablas de datos (highscores, personajes, guilds...) */
table.TableContainer td, table.TableContainer th { padding: 7px 10px; }
table.TableContainer tr:nth-child(even) .TableContent { background: rgba(255,255,255,.028); }
table.TableContainer tr:hover .TableContent { background: rgba(201,162,39,.08); }
/* ---------- titulos ---------- */
.Title, .BorderTitleText, .CaptionContainer, .CaptionInnerContainer {
font-family: var(--font-display);
font-size: 20px; letter-spacing: .16em; text-transform: uppercase;
color: var(--gold-light); margin: 0 0 20px; padding: 0;
background: none; border: 0;
}
.Title { display: block; padding-bottom: 12px; border-bottom: 1px solid rgba(201,162,39,.25); }
table .Title, .Box .Title { font-size: 16px; margin-bottom: 10px; }
/* ---------- formularios ---------- */
.LabelV, .OptionContainer .LabelV, td.LabelV {
color: var(--gold); font-family: var(--font-display);
letter-spacing: .1em; text-transform: uppercase; font-size: 12px;
vertical-align: middle; padding: 8px 14px 8px 0; text-align: right;
}
/* OJO: hay que incluir input:not([type]) — MyAAC genera campos SIN atributo
type (ej. ), y el selector
input[type="text"] NO los matchea, con lo que se quedaban con el fondo
blanco por defecto del navegador. */
input:not([type]), input.Text, input[type="text"], input[type="password"],
input[type="email"], input[type="number"], input[type="date"], select, textarea {
font-family: var(--font-body);
font-size: 15px; color: var(--text) !important;
/* !important porque MyAAC mete estilos en linea */
background: linear-gradient(180deg, rgba(18,20,15,.95), rgba(10,12,8,.95)) !important;
border: 1px solid rgba(201,162,39,.3) !important;
padding: 9px 12px; outline: none;
transition: border-color .18s, box-shadow .18s;
}
input:not([type]):focus, input.Text:focus, input[type="text"]:focus,
input[type="password"]:focus, input[type="email"]:focus, input[type="number"]:focus,
input[type="date"]:focus, select:focus, textarea:focus {
border-color: var(--gold);
box-shadow: 0 0 0 1px rgba(201,162,39,.35), 0 0 18px rgba(201,162,39,.15);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--gold); }
select option { background: #0d0f0b; color: var(--text); }
label { color: var(--text); }
/* OJO: en MyAAC `.Text` es DOS cosas distintas:
-
/ = el TITULO de la caja (caption)
- = un campo de texto
Por eso se separan por etiqueta. */
div.Text, span.Text, td.Text {
font-family: var(--font-display);
font-size: 17px; letter-spacing: .16em; text-transform: uppercase;
color: var(--gold-light);
background: none; border: 0; padding: 0; margin: 0;
}
/* ---------- MyAAC inyecta colores del config.ini como estilos EN LINEA
(ej.