/* --- BudiOT Remastered - Estilo Base --- */
body {
    background-color: #0f0f0f; /* Fondo oscuro elegante */
    color: #e0e0e0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
}

/* Contenedor principal */
#page {
    width: 950px;
    margin: 0 auto;
    background-color: #1a1a1a;
    padding: 20px;
    border-left: 1px solid #333;
    border-right: 1px solid #333;
}

/* Header (donde está tu logo) */
#header {
    text-align: center;
    padding: 30px 0;
    background: #000;
    margin-bottom: 20px;
    border-bottom: 2px solid #e67e22; /* Color naranja de tus botones */
}

.logo {
    max-width: 400px;
    height: auto;
}

/* Botones Hero */
.hero-buttons {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.hero-buttons a {
    padding: 12px 25px;
    background: #e67e22;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    text-transform: uppercase;
}
/* --- Remodelación del sistema de Tickers / News --- */
/* Eliminamos el fondo rojo agresivo */
.ticker, .news-ticker {
    background: #1a1a1a !important; /* Fondo gris oscuro */
    border-left: 4px solid #e67e22; /* Borde lateral naranja BudiOT */
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    padding: 15px;
    margin-bottom: 10px;
    color: #ccc;
    display: flex;
    flex-direction: column; /* Apilamos contenido */
}

/* Reordenamos los elementos para que el autor/fecha vaya al pie */
.ticker-date, .ticker-author {
    order: 2; /* Los enviamos al final */
    margin-top: 10px;
    font-size: 0.85em;
    color: #888; /* Color gris suave para que no distraiga */
    font-style: italic;
    border-top: 1px solid #333;
    padding-top: 5px;
}

/* El contenido principal se mantiene arriba */
.ticker-content {
    order: 1;
    font-size: 1em;
    color: #fff;
}

/* Estilo para el icono del martillo (si existe) */
.ticker img {
    display: none; /* Si el icono es muy feo, lo ocultamos o le damos estilo */
}


/* ============================================================
   BudiOT Remastered — Modernización de Componentes
   ============================================================ */

/* 1. Limpieza y modernización del Ticker */
.news-ticker, .ticker {
    background: #1a1a1a !important; 
    border-left: 4px solid #e67e22 !important; 
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    padding: 20px;
    margin-bottom: 20px;
    color: #ccc;
    display: flex;
    flex-direction: column;
}

.ticker img { display: none; } 

.ticker-date, .ticker-author {
    order: 2; 
    text-align: right;
    font-size: 11px;
    color: #888;
    font-style: italic;
    margin-top: 15px;
    border-top: 1px solid #333;
    padding-top: 5px;
}

/* 2. Grid de Características (Para las tarjetas de info) */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    margin: 20px 0;
}

.feature-card {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 10px;
    padding: 18px 12px;
    text-align: center;
    transition: transform 0.2s ease;
}

.feature-card:hover {
    transform: translateY(-4px);
    border-color: #e67e22;
}

.feature-title {
    color: #e67e22;
    font-weight: bold;
    font-size: 13px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

/* --- Modernización de Formularios --- */
/* Eliminamos el fondo rayado y el color claro */
table[cellpadding="0"][cellspacing="0"][border="0"][width="100%"] {
    background: none !important;
}

/* Aplicamos estilo a las tablas de formularios */
form table, 
table[cellpadding="3"] { /* Selector para tablas de formularios MyAAC */
    background: #1a1a1a !important;
    border: 1px solid #333 !important;
    border-radius: 8px !important;
    padding: 20px !important;
}

/* Cambiamos el color de fondo de las filas */
tr {
    background: transparent !important;
}

/* Inputs (Cajas de texto) con estilo moderno */
input[type="text"], 
input[type="password"], 
select {
    background: #0f0f0f !important;
    border: 1px solid #444 !important;
    color: #fff !important;
    padding: 6px;
    border-radius: 4px;
}

/* Ajuste de etiquetas de texto */
td {
    color: #ccc !important;
}