/* ARCHIVO: recursos/myl_base.css
   PROPÓSITO: Hojas de estilo globales ultra-compactas para MYL TEAM. Incluye paleta oficial de 19 colores dinámicos (tabla myl_paleta), reset general, tipografía Inter, maquetación compacta de la plantilla base, utilidades y componentes globales.
   PROYECTO: MYL_TEAM.NET (Plataforma Consolidada)
   ÁMBITO: [FRONTEND / ESTILOS GLOBAL] | PERFILES: [[Cherry]], [[Nancy]], [[Kelly]]
   ACTUALIZACIONES:
   01. [13/08/2026] - 12:00: Creación inicial adaptada desde referencia GLChile por [[Cherry]].
   02. [13/08/2026] - 12:20: Inclusión del color 19 (plomo), compactación de paddings/margins y aplicación de Zero Static Color por [[Cherry]].
   03. [13/08/2026] - 12:30: Eliminación total del alias --tema- (exclusividad --paleta-), estandarización a selectores de una línea (Regla [602]) y cumplimiento estricto del Bloque 06 por [[Cherry]].
   04. [13/08/2026] - 12:45: Adición de la Sección 5 (Elementos de la Plantilla: MYL_HEADER GLOBAL) por [[Cherry]].
   05. [13/08/2026] - 13:10: Integración de estilos para el desglose de 4 divisas (YaMi$, Oro, Plata, Bronce) en el Header por [[Cherry]].
   06. [13/08/2026] - 15:10: Restauración completa de .myl-app-header, alineación de contraste de textos en Header/Footer y estandarización a 1 línea por selector por [[Cherry]].
   07. [24/08/2026] - 13:45: Eliminación del límite estático max-height: 280px en .myl-panel-compact-box para permitir la expansión vertical en el Dashboard por [[Cherry]].
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ========================================================================= */
/* SECCION 1: NÚCLEO, RESET Y HOJA DE ESTILOS BASE                           */
/* ========================================================================= */

/* --- Bloque 1.1: Paleta Oficial de 19 Colores Dinámicos (Regla [605]) --- */
:root {
  --paleta-negro: #000000;
  --paleta-blanco: #ffffff;
  --paleta-plata: #c0c0c0;
  --paleta-gris: #808080;
  --paleta-plomo: #4a4a4a;
  --paleta-oro: #b39105;
  --paleta-amarillo: #ffff00;
  --paleta-naranja: #ffa500;
  --paleta-melon: #ffdab9;
  --paleta-rojo: #ff0000;
  --paleta-rosado: #ffc0cb;
  --paleta-morado: #800080;
  --paleta-lila: #e6e6fa;
  --paleta-azul: #0000ff;
  --paleta-celeste: #daf7f6;
  --paleta-verde: #008000;
  --paleta-turquesa: #bddec7;
  --paleta-marron: #8b4513;
  --paleta-crema: #fffdd0;
}

/* --- Bloque 1.2: Reset General Estructural --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { margin: 0; padding: 0; font-family: 'Inter', system-ui, -apple-system, sans-serif; background-color: var(--paleta-negro); display: flex; align-items: center; justify-content: center; min-height: 100vh; color: var(--paleta-negro); }
body.panel-layout { height: 100vh; overflow: hidden; display: flex; flex-direction: column; background-color: var(--paleta-celeste); align-items: stretch; justify-content: flex-start; }

/* ========================================================================= */
/* SECCION 2: MAQUETACIÓN ESTRUCTURAL Y COMPONENTES BASE (LAYOUT COMPACTO)    */
/* ========================================================================= */

/* --- Bloque 2.1: Estructura Principal de Plantilla Base --- */
.main-wrapper { display: flex; flex: 1; overflow: hidden; }
.main-container { display: flex; flex: 1; overflow: hidden; width: 100%; height: calc(100vh - 50px); }
.workspace, .myl-content-viewport { padding: 6px; background-color: var(--paleta-blanco); flex: 1; overflow-y: auto; }
.myl-app-body { display: flex; flex: 1; overflow: hidden; width: 100%; }

/* ========================================================================= */
/* SECCION 3: FORMULARIOS Y CONTENEDORES DE CONTENIDO COMPACTOS               */
/* ========================================================================= */

/* --- Bloque 3.1: Tarjetas y Contenedores --- */
.content-card, .myl-card { background: var(--paleta-blanco); padding: 10px; border-radius: 6px; margin-bottom: 8px; border: 1px solid var(--paleta-plata); }
.content-card h2, .myl-card h2 { color: var(--paleta-negro); margin-bottom: 6px; font-size: 1.2em; font-weight: 600; }
.content-card p, .myl-card p { color: var(--paleta-plomo); line-height: 1.4; font-size: 0.85em; }
.divider { border: 0; border-top: 1px solid var(--paleta-negro); margin: 6px 0; }

/* --- Bloque 3.2: Controles de Formulario --- */
.tag-label { font-size: 0.7rem; color: var(--paleta-negro); margin-bottom: 1px; display: block; font-weight: 700; text-transform: uppercase; }
.input-flat { margin-bottom: 4px; padding: 3px 6px; font-size: 0.82em; border: 1px solid var(--paleta-gris); border-radius: 3px; width: 100%; background: var(--paleta-blanco); color: var(--paleta-negro); font-family: inherit; }
.input-flat:focus { border-color: var(--paleta-oro); outline: none; }
select.input-flat { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>"); background-repeat: no-repeat; background-position-x: calc(100% - 6px); background-position-y: 50%; padding-right: 24px; }
.checkbox-color { width: 16px; height: 16px; cursor: pointer; accent-color: var(--paleta-negro); vertical-align: middle; }
.field-group { margin-bottom: 4px; }

/* ========================================================================= */
/* SECCION 4: TABLAS MAESTRAS, ACCIONES Y UTILIDADES                         */
/* ========================================================================= */

/* --- Bloque 4.1: Estilo de Tablas Cebra y Listados Maestros --- */
.tabla-maestra, .tabla-cebra { width: 100%; border-collapse: collapse; margin-top: 6px; background: var(--paleta-blanco); border-radius: 4px; overflow: hidden; font-family: 'Inter', sans-serif; }
.tabla-maestra th, .tabla-cebra th { background-color: var(--paleta-negro); color: var(--paleta-blanco); padding: 5px 6px; text-align: left; font-size: 0.8em; text-transform: uppercase; font-weight: 600; }
.tabla-maestra td, .tabla-cebra td { padding: 3px 5px; border-bottom: 1px solid var(--paleta-plata); font-size: 0.8em; color: var(--paleta-negro); }
.tabla-cebra tbody tr:nth-child(even), .tabla-maestra tbody tr:nth-child(even) { background-color: var(--paleta-celeste); }
.tabla-cebra tbody tr:nth-child(odd), .tabla-maestra tbody tr:nth-child(odd) { background-color: var(--paleta-blanco); }

/* --- Bloque 4.2: Botones y Acciones Base Compartidas --- */
.btn-guardar { background-color: var(--paleta-oro); color: var(--paleta-negro); padding: 4px 8px; border-radius: 3px; font-weight: 600; transition: 0.2s; border: none; cursor: pointer; text-decoration: none; display: inline-block; font-size: 0.8em; }
.btn-guardar:hover { background-color: var(--paleta-verde); color: var(--paleta-blanco); }
.btn-primario { background-color: var(--paleta-negro); color: var(--paleta-blanco); padding: 4px 8px; text-decoration: none; border-radius: 3px; display: inline-block; font-weight: 600; font-size: 0.8em; border: none; cursor: pointer; }
.btn-primario:hover { background-color: var(--paleta-oro); color: var(--paleta-negro); }
.btn-accion { background-color: var(--paleta-negro); color: var(--paleta-blanco); padding: 3px 6px; text-decoration: none; border-radius: 3px; font-weight: 600; display: inline-block; font-size: 0.78em; border: none; cursor: pointer; }
.btn-accion:hover { background-color: var(--paleta-oro); color: var(--paleta-negro); }
.btn-cancelar { background-color: var(--paleta-gris); color: var(--paleta-blanco); padding: 4px 8px; border-radius: 3px; font-weight: 600; text-decoration: none; display: inline-block; font-size: 0.8em; border: none; cursor: pointer; }
.btn-cancelar:hover { background-color: var(--paleta-negro); }
.btn-peligro { background-color: var(--paleta-rojo); color: var(--paleta-blanco); padding: 4px 8px; border-radius: 3px; font-weight: 600; text-decoration: none; display: inline-block; font-size: 0.8em; border: none; cursor: pointer; }
.btn-peligro:hover { background-color: var(--paleta-marron); }

/* --- Bloque 4.3: Grillas y Plantillas de Disposición --- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 8px; }

/* --- Bloque 4.4: Utilidades de Tablas (Anchos Relativos Regla [603]) --- */
.td-5 { width: 4.8%; }
.td-10 { width: 9.6%; }
.td-15 { width: 14.4%; }
.td-20 { width: 19.2%; }
.td-25 { width: 24.0%; }
.td-30 { width: 28.8%; }
.td-35 { width: 33.6%; }
.td-40 { width: 38.4%; }
.td-50 { width: 48.0%; }

/* --- Bloque 4.5: Clases Auxiliares Específicas MYL TEAM --- */
.myl-level-title { font-size: 1.1rem; font-weight: 700; color: var(--paleta-negro); margin-bottom: 6px; }
.myl-form-inline { display: flex; gap: 6px; align-items: center; }
.myl-input-readonly { background-color: var(--paleta-celeste); border: 1px solid var(--paleta-plata); cursor: not-allowed; }
.myl-subtitle-danger { color: var(--paleta-rojo); font-weight: bold; font-size: 0.85em; }
.myl-text-center { text-align: center; }
.myl-text-right { text-align: right; }
.myl-badge { display: inline-block; padding: 2px 6px; border-radius: 10px; font-size: 0.7rem; font-weight: 600; background-color: var(--paleta-celeste); color: var(--paleta-negro); }

/* ========================================================================= */
/* SECCION 5: ELEMENTOS DE LA PLANTILLA                                      */
/* ========================================================================= */

/* --- Bloque 5.1: MYL_HEADER GLOBAL --- */
.myl-app-header { background-color: var(--paleta-negro); color: var(--paleta-blanco); height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; border-bottom: 2px solid var(--paleta-oro); position: sticky; top: 0; z-index: 1000; width: 100%; }
.myl-header-brand-box { display: flex; align-items: center; gap: 8px; }
.myl-header-brand-logo { width: 28px; height: 28px; object-fit: contain; border-radius: 3px; }
.myl-header-brand-title { font-size: 0.95rem; font-weight: 700; color: var(--paleta-oro); line-height: 1; }
.myl-header-brand-sub { font-size: 0.65rem; color: var(--paleta-plata); font-weight: 600; }
.myl-header-center-nav { flex: 1; display: flex; justify-content: center; align-items: center; padding: 0 10px; }
.myl-header-user-box { display: flex; align-items: center; gap: 10px; }
.myl-user-info { display: flex; flex-direction: column; text-align: right; gap: 2px; }
.myl-user-name { font-size: 0.8rem; font-weight: 700; color: var(--paleta-blanco); line-height: 1.1; }
.myl-user-coins { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.myl-coin-item { display: flex; align-items: center; gap: 2px; }
.myl-coin-icon { width: 16px; height: 16px; max-width: 16px; max-height: 16px; object-fit: contain; display: inline-block; vertical-align: middle; flex-shrink: 0; }
.myl-coin-val { font-size: 0.72rem; font-weight: 700; color: var(--paleta-blanco); }
.myl-btn-logout { background-color: var(--paleta-rojo); color: var(--paleta-blanco); padding: 3px 8px; border-radius: 3px; text-decoration: none; font-size: 0.75rem; font-weight: 700; transition: background 0.2s; display: inline-block; }
.myl-btn-logout:hover { background-color: var(--paleta-marron); color: var(--paleta-blanco); }

/* --- Bloque 5.2: MYL_HEADER_MENU (GLOBAL) --- */
/* 5.2.1 Contenedor Lista Navegación Central */
.myl-header-nav-list { display: flex; align-items: center; gap: 0.35rem; list-style: none; margin: 0; padding: 0; }
/* 5.2.2 Enlace de Ítem de Navegación */
.myl-nav-item-link { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; padding: 0.4rem 0.75rem; border-radius: 0.375rem; text-decoration: none; color: var(--paleta-plata); font-size: 0.75rem; font-weight: 600; text-align: center; transition: all 0.2s ease; border-bottom: 2px solid transparent; }
/* 5.2.3 Estado Hover de Enlace */
.myl-nav-item-link:hover { color: var(--paleta-blanco); background-color: rgba(255, 255, 255, 0.08); }
/* 5.2.4 Estado Activo de Enlace */
.myl-nav-item-link.active { color: var(--paleta-oro); border-bottom-color: var(--paleta-oro); background-color: rgba(179, 145, 5, 0.15); font-weight: 700; }
/* 5.2.5 Ícono de Navegación */
.myl-nav-item-icon { width: 20px; height: 20px; object-fit: contain; }

/* --- Bloque 5.3: MYL_SIDEBAR (GLOBAL) --- */
/* 5.3.1 Contenedor Principal Barra Lateral */
.myl-sidebar-wrapper { width: 240px; background-color: var(--paleta-negro); border-right: 1px solid rgba(255, 255, 255, 0.1); padding: 1rem 0.75rem; display: flex; flex-direction: column; gap: 1.25rem; flex-shrink: 0; min-height: calc(100vh - 65px); }
/* 5.3.2 Cajas de Grupo */
.myl-sidebar-group-box { display: flex; flex-direction: column; gap: 0.35rem; }
/* 5.3.3 Título de Grupo/Categoría */
.myl-sidebar-group-title { font-size: 0.6875rem; font-weight: 700; color: var(--paleta-gris); text-transform: uppercase; letter-spacing: 0.05em; padding: 0 0.5rem 0.25rem 0.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 0.35rem; }
/* 5.3.4 Lista de Ítems Lateral */
.myl-sidebar-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
/* 5.3.5 Enlace de Navegación Lateral */
.myl-sidebar-link { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.6rem; border-radius: 0.375rem; text-decoration: none; color: var(--paleta-plomo); font-size: 0.8rem; font-weight: 600; transition: all 0.2s ease; border-left: 3px solid transparent; }
/* 5.3.6 Estado Hover de Enlace Lateral */
.myl-sidebar-link:hover { background-color: rgba(255, 255, 255, 0.08); color: var(--paleta-blanco); }
/* 5.3.7 Estado Activo de Enlace Lateral */
.myl-sidebar-link.active { background-color: rgba(179, 145, 5, 0.15); color: var(--paleta-oro); font-weight: 700; border-left-color: var(--paleta-oro); }
/* 5.3.8 Ícono de Enlace Lateral */
.myl-sidebar-icon { width: 18px; height: 18px; object-fit: contain; }

/* --- Bloque 5.4: MYL_FOOTER GLOBAL --- */
/* 5.4.1 Contenedor Principal del Pie de Página */
.myl-app-footer { background-color: var(--paleta-negro); color: var(--paleta-blanco); border-top: 1px solid var(--paleta-oro); padding: 6px 12px; font-size: 0.75rem; width: 100%; flex-shrink: 0; }
/* 5.4.2 Disposición Flex Interna */
.myl-footer-flex { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
/* 5.4.3 Contenedor de Texto del Footer */
.myl-footer-text { color: var(--paleta-blanco); font-size: 0.75rem; font-weight: 500; }
/* 5.4.4 Enlace de Desarrollo / Contacto WhatsApp */
.myl-footer-dev-link { color: var(--paleta-oro); text-decoration: none; font-weight: 600; transition: color 0.2s ease; }
.myl-footer-dev-link:hover { color: var(--paleta-amarillo); text-decoration: underline; }
/* 5.4.5 Enlace de Versión Activa */
.myl-footer-version-link { color: var(--paleta-plata); text-decoration: none; font-weight: 700; transition: color 0.2s ease; }
.myl-footer-version-link:hover { color: var(--paleta-blanco); text-decoration: underline; }

/* --- Bloque 6. SUBPANELES PORTADA ADMINISTRATIVA (DESKTOP / DASHBOARD 3x2) --- */
.myl-panel-compact-box { width: 100%; height: 100%; display: flex; flex-direction: column; padding: 8px; box-sizing: border-box; overflow: hidden; }
.myl-panel-compact-header { margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--paleta-plata); }
.myl-panel-title-txt { font-size: 0.82rem; font-weight: bold; color: var(--paleta-negro); margin: 0; text-transform: uppercase; letter-spacing: 0.5px; }

.myl-panel-badges-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; align-items: center; }
.myl-badge { font-size: 0.70rem; padding: 2px 8px; border-radius: 12px; font-weight: bold; display: inline-block; }
.myl-badge-success { background-color: #daf7f6; color: #008000; border: 1px solid #008000; }
.myl-badge-danger { background-color: #ffc0cb; color: #ff0000; border: 1px solid #ff0000; }
.myl-badge-info { background-color: #e6e6fa; color: #0000ff; border: 1px solid #0000ff; }

.myl-panel-table-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; border: 1px solid var(--paleta-plomo); border-radius: 4px; }
.myl-table-cebra { width: 100%; border-collapse: collapse; font-size: 0.72rem; }
.myl-table-cebra thead tr { background-color: #000000; color: #ffffff; position: sticky; top: 0; z-index: 2; }
.myl-table-cebra th { padding: 3px 5px; text-align: left; font-weight: 600; font-size: 0.70rem; line-height: 1.1; }
.myl-table-cebra tbody tr:nth-child(odd) { background-color: #ffffff; }
.myl-table-cebra tbody tr:nth-child(even) { background-color: #daf7f6; }
.myl-table-cebra td { padding: 2px 5px; border-bottom: 1px solid #e0e0e0; vertical-align: middle; white-space: nowrap; font-size: 0.68rem; line-height: 1.1; }