/* =====================================================================================================================
   (06/11/2026, el dueño: "el look de piedra, el mismo look, la tipografía, todo lo que tenemos ahorita en el juego…
   ponérselo a nuestro panel") EL PANEL DE PIEDRA. Los mismos valores que tema/tibia.css (colores, texturas de img/ui_tibia,
   biseles, Verdana), en hoja aparte porque tibia.css son 700 líneas de selectores del juego que aquí no existen.
   panel.html carga este archivo después de su <style>: pisa lo de allá. CÓMO SE QUITA: borrar el <link> de panel.html.
   Súbele el ?v= en panel.html cada que cambie (el navegador lo guarda).
   ===================================================================================================================== */
:root {
  --bg: #2b2b2b; --bg1: #343434; --bg2: #232323; --linea: #5f5f5f;
  --fg: #dedede; --fg-dim: #bdbdbd; --fg-faint: #a8a8a8;
  --oro: #f2c94c; --oro2: #d9a93a; --oro-dim: #8c7636; --diam: #a8dcff; --verde: #8fe29d; --rojo: #ff9a90;
  --tb-claro: #8c8c8c; --tb-oscuro: #121212;
  --tb-tex: url(/img/ui_tibia/textura_panel.png); --tb-tex2: url(/img/ui_tibia/textura_hundido.png);
  --tb-letra: Verdana, Tahoma, 'DejaVu Sans', 'Segoe UI', sans-serif;
}
/* ---------- EL FONDO: la piedra en una capa fija y más grande que la pantalla (el rebote del celular no le ve el fin) ---------- */
html { background: #262626; }
body { background: transparent; background-attachment: scroll; font-family: var(--tb-letra); font-size: 13px; letter-spacing: 0; }
body::before { content: ''; position: fixed; left: 0; right: 0; top: -60vh; bottom: -60vh; z-index: -1; pointer-events: none;
  background: #262626 var(--tb-tex2) repeat; }
body * { font-family: var(--tb-letra) !important; }
::selection { background: rgba(242,201,76,0.35); }
::-webkit-scrollbar-track { background: #232323; }
::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #6a6a6a, #4a4a4a); border: 1px solid; border-color: #8c8c8c #121212 #121212 #8c8c8c; }
* { scrollbar-color: #5a5a5a #232323; }

/* ---------- LA CABECERA: barra de título de ventana ---------- */
.cabecera { background: #333 var(--tb-tex) repeat; border-bottom: 1px solid #0e0e0e; box-shadow: inset 0 1px 0 #5a5a5a, 0 2px 0 #0e0e0e; }
.marca { font-size: 15px; font-weight: bold; color: #f0f0f0; }
.marca small { font-size: 11px; font-weight: bold; letter-spacing: 1px; color: #ffd76a; text-shadow: 0 1px 0 #000; border-radius: 0; box-shadow: none;
  background: linear-gradient(#333, #424242); border: 2px solid; border-color: var(--tb-oscuro) var(--tb-claro) var(--tb-claro) var(--tb-oscuro); padding: 2px 7px; }
.quien { color: var(--fg-dim); font-size: 12px; }

/* ---------- PESTAÑAS: relieve; la activa, hundida y en oro ---------- */
.tab { background: linear-gradient(#5e5e5e, #444); color: #d6d6d6; font-size: 12px; letter-spacing: 0; border-radius: 0; line-height: 1.2; transition: none;
  border: 2px solid; border-color: var(--tb-claro) var(--tb-oscuro) var(--tb-oscuro) var(--tb-claro); box-shadow: none; }
.tab:hover { color: #fff; filter: brightness(1.12); border-color: var(--tb-claro) var(--tb-oscuro) var(--tb-oscuro) var(--tb-claro); }
.tab.activa { background: linear-gradient(#333, #424242); color: #ffd76a; font-weight: bold; box-shadow: none;
  border-color: var(--tb-oscuro) var(--tb-claro) var(--tb-claro) var(--tb-oscuro); }
.tab:focus-visible { outline: 2px solid #ffd76a; }
.tab #buzonCuenta:not(:empty) { font-size: 10px; border-radius: 0; background: #a8332e; }
.cn-periodos .tab { font-size: 11.5px; padding: 4px 9px; }

/* ---------- LAS VENTANAS: marco de metal 9-slice + piedra ---------- */
.caja { border: 8px solid transparent; border-image: url(/img/ui_tibia/marco.png) 8 stretch; border-radius: 0;
  background: #3a3a3a var(--tb-tex) repeat; background-clip: padding-box; box-shadow: 0 0 0 1px #000, 0 6px 18px rgba(0,0,0,0.6); padding: 12px; }
.caja h3 { font-size: 13px; font-weight: bold; letter-spacing: 0.2px; text-transform: none; color: #f0f0f0; text-shadow: 0 1px 0 #000; }
.caja h3::before { background: var(--oro); box-shadow: none; }
#appResumen:hover { filter: brightness(1.06); }

/* ---------- LO HUNDIDO: las cifras y los renglones que van dentro de una ventana ---------- */
.kpi, .ap-tienda, .evento-fila, .dir, .md-acciones { background: #2a2a2a var(--tb-tex2) repeat; border-radius: 0; box-shadow: none;
  border: 2px solid; border-color: var(--tb-oscuro) var(--tb-claro) var(--tb-claro) var(--tb-oscuro); }
.kpi::after { display: none; }
.kpi .et { font-size: 10.5px; letter-spacing: 0.2px; text-transform: none; color: var(--fg-dim); }
.kpi .n { font-size: 22px; font-weight: bold; line-height: 1.15; color: #f0f0f0; text-shadow: 0 1px 0 #000; }
.kpi .n.dm { color: var(--diam); text-shadow: 0 1px 0 #000; }
.kpi .n.au { color: var(--oro); }
#appResumen .kpi .n, .co-camp .kpi .n { font-size: 18px; }
.kpi.toca:hover, .kpi.toca.abierta { border-color: var(--tb-oscuro) var(--oro) var(--oro) var(--tb-oscuro); }
.evento-fila.activo { background: #2c3a30 var(--tb-tex2) repeat; border-color: #16321f #5fae78 #5fae78 #16321f; }

/* ---------- GRÁFICAS ---------- */
.barra { background: #242424; border-radius: 0; }
.barra i { background: linear-gradient(#ffd76a, #c9a33a); border-radius: 0; box-shadow: none; }
.embudo .riel { background: #1c1c1c; border-radius: 0; border: 1px solid; border-color: var(--tb-oscuro) var(--tb-claro) var(--tb-claro) var(--tb-oscuro); }
.embudo .riel i { background: linear-gradient(90deg, #ffd76a, #c9a33a); }
.cn-tip { background: #232323; border: 1px solid var(--tb-claro); border-radius: 0; }

/* ---------- TABLAS ---------- */
table, .pub-tabla { font-size: 12.5px; }
th, .pub-tabla th { font-size: 11.5px; font-weight: bold; letter-spacing: 0; text-transform: none; color: #f0f0f0; text-shadow: 0 1px 0 #000;
  background: linear-gradient(#5c5c5c, #3d3d3d); border-bottom: 1px solid #101010; }
td, .pub-tabla td { border-bottom: 1px solid rgba(0,0,0,0.45); }
tr:nth-child(even) td { background: rgba(255,255,255,0.03); }
tr.click:hover td { background: rgba(255,255,255,0.08); }

/* ---------- CAMPOS Y LISTAS: hundidos ---------- */
.campo, select, textarea, input[type=text], input[type=search], input[type=number], input[type=email], input[type=password],
input[type=date], input[type=datetime-local], input[type=time], input[type=url], input:not([type]) {
  background: #1c1c1c; color: #eaeaea; border-radius: 0; border: 2px solid; border-color: var(--tb-oscuro) var(--tb-claro) var(--tb-claro) var(--tb-oscuro); }
.campo:focus, select:focus, textarea:focus, input:focus { outline: none; border-color: var(--tb-oscuro) var(--oro) var(--oro) var(--tb-oscuro); box-shadow: none; }
input[type=checkbox], input[type=range] { accent-color: #9a9a9a; }
::placeholder { color: #8f8f8f; }

/* ---------- BOTONES: bisel en relieve (9-slice); al picarlo, hundido ---------- */
.btn, .btn.fantasma, .btn.rojo { border: 5px solid transparent; border-image: url(/img/ui_tibia/boton.png) 5 fill stretch; background: none; color: #ececec;
  text-shadow: 0 1px 0 #000; box-shadow: none; border-radius: 0; letter-spacing: 0.2px; font-weight: bold; font-size: 12.5px; padding: 5px 12px; transition: none; }
a.btn { color: #ececec !important; background: none !important; border-radius: 0 !important; padding: 5px 12px !important; }   /* Abrir el editor trae su estilo dentro del HTML */
.btn:hover:not(:disabled) { filter: brightness(1.12); color: #ececec; }
.btn:active:not(:disabled) { border-image-source: url(/img/ui_tibia/boton_pulsado.png); transform: none; box-shadow: none; }
.btn:disabled { opacity: 0.55; filter: grayscale(1); }
.btn:focus-visible { outline: 2px solid #ffd76a; outline-offset: 1px; }
.btn.fantasma:hover:not(:disabled) { color: #ffd76a; border-color: transparent; }
.btn.rojo, .evento-fecha .ev-apagar { color: #ffb0a8; }
.btn.rojo:hover:not(:disabled) { color: #ffb0a8; }
.cabecera .btn.fantasma { padding: 3px 9px; font-size: 12px; }
.entrada .btn { font-size: 14px; padding: 7px 14px; }
.an-flechas .btn, .ev-orden .btn { padding: 0; font-size: 11px; }
.md-acciones .fila .btn { padding: 3px 8px; font-size: 12px; }
.md-mini, .md-chip { background: linear-gradient(#5e5e5e, #444); color: #e0e0e0; border-radius: 0; border: 2px solid; border-color: var(--tb-claro) var(--tb-oscuro) var(--tb-oscuro) var(--tb-claro); }
.md-mini:hover { color: #ffb0a8; border-color: var(--tb-claro) var(--tb-oscuro) var(--tb-oscuro) var(--tb-claro); }
.md-chip.fuera { color: var(--fg-faint); border-style: solid; background: #2a2a2a; }
.md-quien { color: var(--oro); }
.md-msj, .md-lista .fila { border-bottom-color: rgba(0,0,0,0.45); }

/* ---------- ETIQUETAS Y ESTADOS: rectos, con su color para distinguirlos ---------- */
.etiqueta, .pub-estado, .estado, .ap-estado { border-radius: 0; }
.etiqueta { background: #232323; color: var(--fg-dim); border: 1px solid #5f5f5f; font-size: 11px; }
.etiqueta.el-reg { color: var(--verde); border-color: #4f8a60; }
.etiqueta.el-juega { color: #ffb3a6; border-color: #8a4a44; background: #2c1f1e; }
.e-pagado { background: #3a3220; color: #ffd76a; border: 1px solid var(--oro-dim); }
.e-enviado { background: #223528; color: var(--verde); border: 1px solid #4f8a60; }
.e-entregado { background: #2a2a2a; color: var(--fg-dim); border: 1px solid #5f5f5f; }
.e-cancelado, .e-reembolsado { background: #3a2422; color: var(--rojo); border: 1px solid #8a4a44; }
.e-pendiente { background: #2a2a2a; color: var(--fg-faint); border: 1px solid #5f5f5f; }

/* ---------- EVENTOS EN ACORDEÓN: la barra de título de cada uno ---------- */
.ev-barra { background: linear-gradient(#5c5c5c, #3d3d3d); }
.ev-acordeon.abierto .ev-barra { border-bottom-color: #101010; }
.ev-titulo { color: #f0f0f0; text-shadow: 0 1px 0 #000; }
.ev-titulo:hover .ev-nombre { color: #ffd76a; }
.ev-flecha { color: #ffd76a; }
.ev-mini-reloj { font-size: 12px; font-weight: bold; }
.ev-cuenta b { font-size: 14px; letter-spacing: 0; }

/* ---------- LA ENTRADA Y LO DEMÁS ---------- */
.el-juego { border: 2px solid; border-color: var(--tb-oscuro) var(--tb-claro) var(--tb-claro) var(--tb-oscuro); border-radius: 0; background: #2a2a2a; }
.el-juego b { font-size: 13px; color: #ffd76a; }
.dron-marco { border: 2px solid; border-color: var(--tb-oscuro) var(--tb-claro) var(--tb-claro) var(--tb-oscuro); border-radius: 0; }
.ficha-cabeza h2 { font-size: 16px; font-weight: bold; color: #f0f0f0; text-shadow: 0 1px 0 #000; }
.pista, .pub-pie { color: var(--fg-dim); }
@media (max-width: 560px) {
  table { font-size: 11.5px; }
  th { font-size: 10.5px; }
  .tab { font-size: 11.5px; padding: 8px 7px 8px 5px; }
  .menu-movil { font-weight: bold; color: #ffd76a; padding: 8px 10px; }
  nav.tabs.abierta { background: #2a2a2a; border: 2px solid; border-color: var(--tb-claro) var(--tb-oscuro) var(--tb-oscuro) var(--tb-claro); }
  .kpi .n { font-size: 19px; }
}