/*!
  =========================================================
  * WebEngine CMS - Castle Siege Custom Theme
  =========================================================
*/

/* Esconder el título por defecto de WebEngine para usar el nuestro */
.page-title { display: none; }

/* Contenedor Principal */
.cs-theme-container {
    font-family: 'Arial', sans-serif;
    color: #e0caca;
    margin-bottom: 30px;
}

/* ==========================================
   HEADER DEL EVENTO
   ========================================== */
.cs-theme-header {
    text-align: center;
    margin-bottom: 40px;
}
.cs-theme-header .cs-theme-icon {
    color: #e76000;
    font-size: 24px;
    margin-bottom: 5px;
}
.cs-theme-header h1 {
    font-size: 32px;
    font-weight: bold;
    color: #ffffff;
    margin: 0;
    letter-spacing: 4px;
    text-shadow: 0 0 10px rgba(255,0,0,0.3);
}
.cs-theme-header p {
    color: #8c7373;
    font-size: 13px;
    margin-top: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ==========================================
   PANELES GENÉRICOS (Fondos, bordes)
   ========================================== */
.cs-theme-panel {
    background-color: #050101;
    border: 1px solid #2a0808;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
}
.cs-panel-header {
    background-color: #e76000; 
    color: #e0caca;
    padding: 14px 20px;
    font-weight: bold;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    border-bottom: 1px solid #1f0404;
    letter-spacing: 1px;
}

/* ==========================================
   PANEL DUEÑO DEL CASTILLO
   ========================================== */
.cs-owner-panel {
    text-align: center;
    padding: 40px 20px;
    background: radial-gradient(circle at top, #180a00 0%, #050101 60%);
    position: relative;
}
.cs-owner-badge {
    display: inline-block;
    background-color: #241a05;
    color: #e6b800;
    border: 1px solid #4a3c00;
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: bold;
    margin-bottom: 20px;
    letter-spacing: 1px;
}
.cs-owner-badge i { margin-right: 5px; }
.cs-owner-logo-wrapper {
    width: 110px;
    height: 110px;
    margin: 0 auto 15px auto;
    border-radius: 50%;
    background-color: #000;
    box-shadow: 0 0 25px rgba(255, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2px solid #c55200;
}
.cs-owner-logo-wrapper img {
    width: 90px;
    height: 90px;
    image-rendering: pixelated;
}
.cs-owner-guild-name a {
    color: #e6b800 !important;
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
    letter-spacing: 2px;
}
.cs-owner-master-label {
    color: #8c7373;
    font-size: 11px;
    margin-top: 15px;
    margin-bottom: 5px;
    letter-spacing: 1px;
}
.cs-owner-master-name a {
    color: #e6b800 !important;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
}

/* ==========================================
   PANEL CUENTA REGRESIVA
   ========================================== */
.cs-countdown-panel {
    text-align: center;
    padding: 30px 20px;
}
.cs-countdown-title {
    color: #8c7373;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 25px;
}
.cs-timer-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}
.cs-timer-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.cs-timer-box span {
    background-color: #0a0202;
    border: 1px solid #2a0303;
    border-radius: 8px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    color: #ffffff;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.8);
    margin-bottom: 8px;
}
.cs-timer-box small {
    color: #5c4747;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 1px;
}
.cs-timer-sep {
    font-size: 24px;
    color: #5c4747;
    font-weight: bold;
    margin-top: -20px;
}

/* ==========================================
   TABLAS (Información, Guilds, Calendario)
   ========================================== */
.cs-theme-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}
.cs-theme-table th {
    text-align: left;
    padding: 15px 20px;
    font-size: 10px;
    font-weight: bold;
    color: #5c4747;
    text-transform: uppercase;
    border-bottom: 1px solid #1a0404;
    letter-spacing: 1px;
}
.cs-theme-table td {
    padding: 15px 20px;
    border-bottom: 1px solid #1a0404;
    vertical-align: middle;
    font-size: 13px;
}
.cs-theme-table tbody tr:last-child td { border-bottom: none; }
.cs-theme-table tbody tr:hover { background-color: #0d0202; }
.cs-theme-table img { image-rendering: pixelated; border-radius: 2px; }

/* Tabla de Información Específica */
.cs-info-table .info-label {
    width: 40%;
    color: #8c7373;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;
}
.cs-info-table .info-value {
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
}

/* Tipografía y Colores de Ayuda */
.text-yellow { color: #e6b800 !important; }
.text-green { color: #00cc44 !important; }
.text-muted { color: #5c4747 !important; font-size: 12px; }
.font-weight-bold { font-weight: bold; color: #ffffff; }

/* Fix enlaces de Guilds y Masters en Tablas */
.cs-rg-guild a, .cs-rg-master a {
    color: #e6b800 !important; 
    text-decoration: none;
    font-weight: bold;
    transition: color 0.2s ease;
}
.cs-rg-guild a:hover, .cs-rg-master a:hover { color: #c39c03 !important; }

/* Circulito de conteo de guilds */
.cs-rg-count {
    background-color: #180a00;
    color: #ffffff;
    border-radius: 50%;
    width: 20px; 
    height: 20px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    border: 1px solid #330d0d;
}