/*
 * Archivo: style.css
 * Ubicación: compañero-del-mes/assets/style.css
 * NOTA: Los 'body .clase' y los 'important' se mantienen solo donde es estrictamente necesario 
 * para anular los estilos de temas y frameworks de WordPress.
 */

/* Contenedor principal del plugin */
body .cdm-contenedor {
    /* Mantenemos !important para el layout (centrado y tamaño) */
    max-width: 500px !important;
    margin: 20px auto !important; 
    
    padding: 25px; /* No necesita !important */
    
    /* Mantenemos !important para anular colores de fondo de tema */
    background-color: #F2E8CE !important; 
    
    border: 1px solid #000; /* No necesita !important */
    border-radius: 12px; /* No necesita !important */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* No necesita !important */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; /* No necesita !important */
}

/* Título */
body .cdm-titulo {
    /* Mantenemos !important para centrar y color, que son sensibles */
    text-align: center !important;
    color: #000 !important; 
    
    margin-top: 0; /* No necesita !important */
    font-weight: 700; /* No necesita !important */
    border-bottom: 2px solid #000; /* No necesita !important */
    padding-bottom: 10px; /* No necesita !important */
    font-size: 1.8em; /* No necesita !important */
}

/* Notificación Anónima */
body .cdm-anon-notice {
    display: flex; /* Mantenemos el diseño interno sin !important */
    align-items: center;

    background-color: #e6f7ff;
    border: 1px solid #91d5ff;
    color: #004d99;

    padding: 10px 15px;
    margin-bottom: 20px;
    border-radius: 4px;
    font-size: 0.95em;
}

/* Grupo de campos */
body .cdm-campo-grupo {
    margin-bottom: 20px; /* No necesita !important */
}

body .cdm-campo-grupo label {
    display: block; /* No necesita !important */
    margin-bottom: 5px; /* No necesita !important */
    font-weight: 600; /* No necesita !important */
    color: #000; /* No necesita !important */
}

/* Campos de entrada (inputs, select, textarea) */
body .cdm-contenedor input[type="text"],
body .cdm-contenedor select,
body .cdm-contenedor textarea {
    width: 100% !important; /* Esencial para anular width de tema */
    
    padding: 10px; /* No necesita !important */
    border: 1px solid #ccc; /* No necesita !important */
    border-radius: 6px; /* No necesita !important */
    box-sizing: border-box; /* No necesita !important */
    font-size: 1em; /* No necesita !important */
    
    /* Mantenemos !important para anular fondos y colores de texto de tema */
    background-color: white !important; 
    color: #000 !important;
    
    transition: border-color 0.2s; /* No necesita !important */
}

body .cdm-contenedor input[type="text"]:focus,
body .cdm-contenedor select:focus,
body .cdm-contenedor textarea:focus {
    border-color: #000; /* No necesita !important */
    outline: none; /* No necesita !important */
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1); /* No necesita !important */
}

/* Botones principales y secundarios (Usamos !important solo en colores sensibles y display) */
.cdm-btn-principal,
.cdm-btn-secundario {
    display: block !important; /* Importante para anular display: inline-block de WP */
    width: 100% !important; /* Importante para que ocupen todo el ancho */
    
    padding: 12px;
    border: none;
    border-radius: 6px;
    font-size: 1.1em;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s, transform 0.1s;
    font-weight: bold;
}

.cdm-btn-principal {
    background-color: #000 !important; /* Color de fondo crucial */
    color: #F2E8CE !important; /* Color de texto crucial */
    margin-top: 30px !important;
}

.cdm-btn-principal:hover {
    background-color: #333 !important;
    transform: translateY(-1px);
}

.cdm-btn-secundario {
    background-color: #F2E8CE !important; /* Color de fondo crucial */
    color: #000 !important; /* Color de texto crucial */
    
    border: 2px solid #000;
    margin-top: 0;
    width: auto;
    display: inline-block !important; /* Lo necesitamos en este caso */
    padding: 8px 15px;
}

.cdm-btn-secundario:hover {
    background-color: #fff !important;
}

/* Botón pequeño (small) - Usado en el formulario de "Proponer" */
.cdm-btn-small {
    padding: 6px 10px;
    font-size: 0.9em;
    margin-left: 10px;
    
    background-color: #000 !important; /* Color de fondo crucial */
    color: #F2E8CE !important; /* Color de texto crucial */
    
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.cdm-btn-small:hover {
    background-color: #333 !important;
}

/* Mensajes de feedback */
#cdm-mensaje-respuesta {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    text-align: center;
    font-weight: bold;
    display: none; 
}

.cdm-success {
    background-color: #d4edda !important;
    color: #155724 !important;
    border: 1px solid #c3e6cb !important;
}

.cdm-error {
    background-color: #f8d7da !important;
    color: #721c24 !important;
    border: 1px solid #f5c6cb !important;
}

/* ------------------ ESTILOS ADMIN (MÁS SEGUROS EN ESPECIFICIDAD) ------------------ */

.cdm-admin-seccion {
    margin-top: 20px !important; 
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ccd0d4;
    border-radius: 6px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}

.cdm-admin-seccion h2 {
    margin-top: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

/* Resultados (Grid tipo Card) */
.cdm-resultados-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.cdm-admin-card {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    text-align: center;
}

.cdm-primer-lugar {
    background-color: #F2E8CE !important; /* Dejamos !important por si el tema cambia el color de las tarjetas */
    border-color: #000;
    border-width: 2px;
}

.cdm-ranking-posicion {
    font-size: 2.5em;
    font-weight: 700;
    color: #000;
    line-height: 1;
    margin-bottom: 5px;
}

.cdm-ranking-nombre {
    font-size: 1.5em;
    margin-top: 0;
    color: #333;
}

.cdm-ranking-votos {
    font-size: 1.1em;
    color: #555;
    margin-bottom: 15px;
}

.cdm-votos-numero {
    font-size: 1.5em;
    font-weight: bold;
    color: #000;
    display: block;
}

.cdm-btn-admin-ver {
    width: 100%;
    text-align: center;
}

/* Tabla de comentarios */
.cdm-tabla-comentarios th:nth-child(2),
.cdm-tabla-comentarios td:nth-child(2) {
    width: 50%;
}

/* Estilos para los botones de acción en el admin */
.button-danger {
    background-color: #dc3232 !important;
    color: white !important;
    border-color: #c92a2a !important;
}
.button-danger:hover {
    background-color: #cc1818 !important;
    border-color: #a01515 !important;
}
#cdm-link-proponer  {
color: red !important;

}