/* Estilos comunes al area admin */

:root {
    /* --- Colores --- */
--cfondo: #38393c;
--cconteiner: #4b4c4f;
--cturquesa:#83c4d6;
--cbordes: #5a5c60;
--cletrasfondo: #e0f2fe;
--cvioleta: #b074b6ff;
}

body{
    font-family: 'Segoe UI', sans-serif;
    margin: 0;
    background-color: var(--cfondo);
    color: var(--cletrasfondo);
    padding: 20px;
}

.big-container{
    max-width: 1200px;
    margin: 0 auto;
    background-color: var(--cconteiner);
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}

.header-row{
    display: flex;             
    justify-content: space-between; 
    align-items: center;        
    border-bottom: 2px solid var(--cturquesa); 
    padding-bottom: 15px;
    margin-bottom: 30px;
}

.header-links{
    font-size: 1rem; 
    margin: 0; 
    color: var(--cvioleta); 
    text-decoration: none; 
    font-weight: bold; 
}

.header-links a { 
            color: #b074b6ff; /* Violeta */
            text-decoration: none; 
            margin-left: 20px; 
            font-weight: bold; 
            transition: color 0.2s; 
}

.header-links a:hover {
     color: white;
     }

.header-row h1{
     color: var(--cturquesa); 
     margin: 0; 
     padding: 0; 
     border: none; 
     font-size: 1.8rem;
}

.header-links:hover {
     color: white;
}

.card-form {
    background: var(--cfondo);
    padding: 25px; 
    border-radius: 8px; 
    margin-bottom: 30px; 
    border: 1px solid var(--cbordes); 
}

.card-form h3 { 
    color: var(--cvioleta); /* Títulos de tarjeta en Violeta o Celeste */
    margin-bottom: 20px; 
    font-size: 1.2rem; 
    border-bottom: 1px solid var(--cbordes);
    padding-bottom: 10px; 
    margin-top: 0;
}

/* --- MENSAJES --- */
.message {
    padding: 12px;
    border-radius: 6px; 
    margin-bottom: 20px; 
    font-weight: 500; 
}

.message.success { 
    background: #1f7c5e; 
    color: white; 
    border: 1px solid #10b981;
 }

.message.error { 
    background: #7c2d1f; 
    color: white; 
    border: 1px solid #ef4444; 
}

.dashboard-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 25px; 
}

.full-span { 
    grid-column: 1 / -1; 
}

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0 30px #2d2e30 inset !important;
        -webkit-text-fill-color: white !important;
         border: 1px solid var(--cbordes) !important;
         transition: background-color 5000s ease-in-out 0s;
}

.btn-edit {
    background-color: transparent; 
    border: 1px solid var(--cturquesa); 
    color: var(--cturquesa);
    padding: 8px 15px; 
    border-radius: 5px; 
    text-decoration: none; 
    font-weight: bold;
    margin-top: 15px; 
    transition: all 0.2s; 
    width: fit-content; 
    align-self: flex-start;
}

.btn-edit:hover { 
    background-color: var(--cletrasfondo); 
    color: #2d2e30; 
}

.btn-submit { 
        background: var(--cturquesa); color: #2d2e30; 
        padding: 15px; border: none; border-radius: 6px; 
        cursor: pointer; font-weight: bold; font-size: 1.1rem;
        width: 100%; transition: all 0.2s;
        margin-top: 30px;
    }
    .btn-submit:hover { background: #00c5d6; transform: translateY(-2px); }
    
    .btn-back { display: block; text-align: center; margin-top: 20px; color: #aaa; text-decoration: none; }
    .btn-back:hover { color: white; }

.form-torneo-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
    gap: 20px; 
}

.form-torneo-grid label { 
    display: block; 
    margin-bottom: 8px; 
    font-size: 0.9rem; 
    font-weight: 600; 
    color: var(--cturquesa); 
}
        
.form-torneo-grid input, .form-torneo-grid select, .form-torneo-grid textarea { 
            width: 100%; 
            padding: 12px; 
            border-radius: 6px; 
            border: 1px solid var(--cbordes); 
            background-color: #2d2e30; /* Input Oscuro */
            color: white; 
            font-size: 0.95rem; 
            font-family: 'Segoe UI', sans-serif;
}
.form-torneo-grid input:focus, select:focus, textarea:focus { 
    outline: none; 
    border-color: var(--cturquesa); 
    background: #38393c; }

.form-torneo-grid input[type="submit"] { 
       background-color: var(--cturquesa); 
       color: #2d2e30; 
       padding: 12px; 
       cursor: pointer; 
       border: none; 
       font-weight: bold; 
       font-size: 1rem; 
       margin-top: 10px;
}

.form-torneo-grid input[type="submit"]:hover { 
    background-color: #00c5d6; 
}

.container-general{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 20px;
    background-color: transparent;
}

.login-card {
    width: 100%;
    max-width: 450px; /* Ancho cómodo para el header horizontal */
    padding: 40px;
    background-color: #4b4c4f; /* Gris medio (Igual que login/paneles) */
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    border: 1px solid var(--cbordes);
}

      /* --- HEADER HORIZONTAL --- */
.login-header {
    display: flex;
    align-content: center;
    justify-content: center;
    /*gap: 60px;*/
    margin-bottom: 5px;
    padding-bottom: 5px;
    /*border-bottom: 1px solid #83c4d6;*/ /* Línea Celeste */
}

.logo-link { 
    flex-shrink: 0; 
    display: block; 
}
.logo-img { 
    width: 100px; 
    height: auto; 
    display: block; 
    transition: transform 0.3s ease; 
}
.logo-link:hover .logo-img { 
    transform: scale(1.1); 
}

.header-text { 
    display: flex;
    flex-direction: column;
    align-content: center;
    text-align: center;
    border-bottom: 1px solid var(--cturquesa);
    padding-bottom: 15px;   /* Un poco de aire antes de la línea */
    margin-bottom: 20px;    /* Separación con el formulario */
    width: 100%;
}

.header-text h1 {
    margin-bottom: 5px; /* Antes tenía mucho margen, ahora solo 5px */
    margin-top:10px;      /* Nos aseguramos que no tenga margen arriba tampoco */
    line-height: 1.2;   /* Evita que ocupe altura innecesaria */
    color: var(--cturquesa);     /* Tu color celeste */
    font-size: 1.5rem;  /* Ajusta el tamaño si lo ves muy grande */
}

.header-text .subtitle {
    margin-top: 0;      /* Ya lo tenías, pero para confirmar */
    color: var(--cletrasfondo);     /* Tu color claro */
}

.msg-alert { 
    padding: 12px; 
    border-radius: 6px; 
    margin-bottom: 25px; 
    font-weight: 500; 
    font-size: 0.95rem; 
    text-align: center; 
}

.footer-links {
    margin-top: 25px; 
    text-align: center; 
    font-size: 0.9rem;
    border-top: 1px solid var(--cbordes); 
    padding-top: 20px;
}

.footer-links a {
    color: var(--cturquesa); 
    text-decoration: none; 
    font-weight: 600; 
    transition: color 0.2s;
}

.footer-links a:hover { 
    color: white; 
}

/* <------------ Fin css general > */

/* Estilos Panel socio  ---------------->*/ 

.welcome-title { 
    font-size: 1.5rem; 
    color: white; 
    margin-bottom: 5px; 
    margin-top: 0;
}

.welcome-sub { 
    color: #ccc; 
    margin-bottom: 25px; 
    margin-top: 0;}

/* --- Grilla principal PRINCIPAL --- */

        
/* --- DATOS PERSONALES --- */

.data-list p { 
            margin-bottom: 10px; font-size: 0.95rem; 
            border-bottom: 1px solid #444; padding-bottom: 5px; display: flex; justify-content: space-between;
        }

.data-list strong {
    color: var(--cturquesa);
}
        

/* --- ESTADO DE CUENTA --- */
.badge-debt { 
    background: #644949; 
    color: #f87171; 
    padding: 8px 15px; 
    border-radius: 6px; 
    font-weight: bold; 
    border: 1px solid #f87171; 
    display: inline-block;
}

.badge-ok { 
    background: #496449; 
    color: #4ade80; 
    padding: 8px 15px; 
    border-radius: 6px; 
    font-weight: bold; 
    border: 1px solid #4ade80; 
    display: inline-block;
}

/* --- LISTAS (Documentos / Historial) --- */
 
.document-list, .torneo-list { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
}

.document-list li, .torneo-list li { 
    background: #2d2e30; /* Fondo item lista */
    margin-bottom: 10px; 
    padding: 12px; 
    border-radius: 6px;
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    font-size: 0.95rem;
    border: 1px solid var(--cbordes);
}
        
/* Botón descargar */
.document-list a { 
    background: var(--cturquesa); 
    color: #2d2e30; 
    padding: 6px 12px; 
    border-radius: 4px; 
    text-decoration: none; 
    font-weight: bold; 
    font-size: 0.85rem; 
}

.document-list a:hover { 
    background: #00c5d6; 
}

/* --- FORMULARIO (Inputs Oscuros) --- */

.form-torneo-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
    gap: 20px; 
}

.form-torneo-grid label { 
    display: block; 
    margin-bottom: 8px; 
    font-size: 0.9rem; 
    font-weight: 600; 
    color: var(--cturquesa); 
}
       
.form-torneo-grid input, .form-torneo-grid select, .form-torneo-grid textarea { 
    width: 100%; 
    padding: 12px; 
    border-radius: 6px; 
    border: 1px solid var(--cbordes); 
    background-color: #2d2e30; /* Input Oscuro */
    color: white; 
    font-size: 0.95rem; font-family: 'Segoe UI', sans-serif;
}

.form-torneo-grid input:focus, select:focus, textarea:focus {
    outline: none; 
    border-color: var(--cturquesa); 
    background: var(--cfondo); 
}

.form-torneo-grid input[type="submit"] { 
    background-color: var(--cturquesa); color: #2d2e30; 
    padding: 12px; cursor: pointer; border: none; font-weight: bold; 
    font-size: 1rem; margin-top: 10px;
}

.form-torneo-grid input[type="submit"]:hover { 
    background-color: var(--cturquesa); 
}
      
.hidden { 
    display: none; 
}
        
/* Badges Torneos */

.badge-oficial { 
    background: #1f7c5e; 
    color: white; 
    padding: 2px 8px; 
    border-radius: 4px; 
    font-weight: bold; 
    font-size: 0.75rem; 
    border: 1px solid #10b981;
}

.badge-no-oficial { 
    background: #7c5e1f; 
    color: #fde047; 
    padding: 2px 8px; 
    border-radius: 4px; 
    font-weight: bold; 
    font-size: 0.75rem; 
    border: 1px solid #eab308;
}

.badge-promocion { 
    color: var(--cvioleta); 
    font-weight: bold; 
    font-size: 0.9rem; 
    margin-left: 10px;
}

@media (max-width: 768px) {
    .dashboard-grid {
         grid-template-columns: 1fr; 
        }
    .header-row { 
        flex-direction: column; 
        text-align: center; 
        gap: 15px;
    }
    .header-links { 
        margin: 0; 
    }
}

/* Final estilos Panel admin  ---------------->*/ 

/* Estilos Panel socio  ---------------->*/ 



.card h3 { 
            color: #b074b6ff; /* Títulos de tarjeta en Violeta o Celeste */
            margin-bottom: 20px; 
            font-size: 1.2rem; 
            border-bottom: 1px solid var(--cbordes); 
            padding-bottom: 10px; 
            margin-top: 0;
}
        
        /* --- DATOS PERSONALES --- */
.data-list p { 
         margin-bottom: 10px; 
         font-size: 0.95rem; 
         border-bottom: 1px solid #444; 
         padding-bottom: 5px; 
         display: flex; 
         justify-content: space-between;
}

.data-list strong { 
    color: var(--cturquesa); 
}
        
/* --- ESTADO DE CUENTA --- */

.badge-debt { 
    background: #644949; 
    color: #f87171; 
    padding: 8px 15px; 
    border-radius: 6px; 
    font-weight: bold; 
    border: 1px solid #f87171; 
    display: inline-block;
}
.badge-ok { 
    background: #496449; 
    color: #4ade80; 
    padding: 8px 15px; 
    border-radius: 6px; 
    font-weight: bold; 
    border: 1px solid #4ade80; 
    display: inline-block;
}

/* --- LISTAS (Documentos / Historial) --- */

.document-list, .torneo-list { 
    list-style: none; 
    padding: 0; 
    margin: 0; }

.document-list li, .torneo-list li { 
            background: #2d2e30; /* Fondo item lista */
            margin-bottom: 10px; 
            padding: 12px; 
            border-radius: 6px;
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            font-size: 0.95rem;
            border: 1px solid var(--cbordes);
}
        
/* Botón descargar */

.document-list a { 
            background: var(--cturquesa); 
            color: #2d2e30; 
            padding: 6px 12px; 
            border-radius: 4px; 
            text-decoration: none; 
            font-weight: bold; 
            font-size: 0.85rem; 
}

.document-list a:hover { 
    background: #00c5d6; 
}

 /* --- FORMULARIO (Inputs Oscuros) --- */

        
.hidden { 
    display: none; 
}
        
        /* Badges Torneos */
.badge-oficial { 
    background: #1f7c5e; 
    color: white; 
    padding: 2px 8px; 
    border-radius: 4px; 
    font-weight: bold; 
    font-size: 0.75rem; 
    border: 1px solid #10b981;
}

.badge-no-oficial { 
    background: #7c5e1f; 
    color: #fde047; 
    padding: 2px 8px; 
    border-radius: 4px; 
    font-weight: bold; 
    font-size: 0.75rem; 
    border: 1px solid #eab308;
}
.badge-promocion { 
    color: #b074b6ff; 
    font-weight: bold; 
    font-size: 0.9rem; 
    margin-left: 10px;
}

@media (max-width: 768px) {
        .dashboard-grid { 
            grid-template-columns: 1fr; 
        }
        .header-row { 
            flex-direction: column; 
            text-align: center; 
            gap: 15px;
        }
       .header-links { 
        margin: 0; 
    }
}
/* <------ Fin estilos panel Socios */

/* Estilos panel_vista.php -------->*/

 /* --- MODAL --- */
        .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.6); backdrop-filter: blur(3px); padding-top: 60px; }
        .modal-content { background-color: #4b4c4f; margin: 5% auto; padding: 30px; border: 1px solid #83c4d6; border-radius: 12px; width: 80%; max-width: 500px; box-shadow: 0 10px 25px rgba(0,0,0,0.7); color: #e0f2fe; }
        .close-btn { color: #aaa; float: right; font-size: 28px; font-weight: bold; }
        .close-btn:hover { color: #83c4d6; cursor: pointer; }

        .socio-nombre-link { cursor: pointer; font-weight: bold; color: #e0f2fe; transition: color 0.2s; }
        .socio-nombre-link:hover { color: #83c4d6; text-decoration: underline; }
        
        .data-label { font-weight: 600; color: #83c4d6; margin-top: 10px; display: block; font-size: 0.9rem; }
        .data-value { font-size: 1.1rem; margin-bottom: 5px; color: white; }
        
        .deuda-status { padding: 10px; border-radius: 8px; margin-top: 15px; font-weight: bold; text-align: center; }
        .deuda-ok { background: #496449; color: #4ade80; border: 1px solid #4ade80; }
        .deuda-pendiente { background: #644949; color: #f87171; border: 1px solid #f87171;}
        .status-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 0.75rem; font-weight: bold; }
        .status-ok { background: #1f7c5e; color: white; }

         .checkbox-wrapper {
            background: #2d2e30; padding: 10px; border-radius: 6px; border: 1px solid #5a5c60; margin-top: 5px;
        }
        .checkbox-wrapper label { margin: 0; display: flex; align-items: center; cursor: pointer; color: white; }
        .checkbox-wrapper input { width: auto; margin: 0 10px 0 0; cursor: pointer; }

        .logout-link { 
            font-size: 1rem; margin: 0; color: #b074b6ff; text-decoration: none; font-weight: bold; 
        }
        .logout-link:hover { color: white; }

        table { width: 100%; border-collapse: collapse; margin-top: 10px; background: #38393c; border-radius: 8px; overflow: hidden; border: 1px solid #5a5c60; }
        
        th { background-color: #2d2e30; font-weight: 600; color: #83c4d6; text-transform: uppercase; font-size: 0.8rem; padding: 12px 15px; text-align: left; border-bottom: 1px solid #5a5c60; }
        
        td { padding: 12px 15px; text-align: left; color: #e0f2fe; border-bottom: 1px solid #5a5c60; font-size: 0.95rem; }
        tr:last-child td { border-bottom: none; }
        tr:hover td { background-color: #444; }

        /* --- MENSAJES --- */
        .msg { padding: 12px; border-radius: 6px; margin-bottom: 20px; font-size: 0.95rem; font-weight: 500;}
        .success { background: #1f7c5e; color: #fff; border: 1px solid #10b981; }
        .error { background: #7c2d1f; color: #fff; border: 1px solid #ef4444; }

        a.btn-link { color: #b074b6ff; text-decoration: none; margin-left: 10px; font-weight: 600; transition: color 0.2s; cursor: pointer; font-size: 0.9rem; }
        a.btn-link:hover { color: white; }

/* Estilos Editar Socios ------> */

   
    /* TITULOS DE SECCIÓN */
    .section-title {
        grid-column: 1 / -1; /* Ocupa todo el ancho */
        color: #b074b6ff;
        border-bottom: 1px solid #666;
        padding-bottom: 5px;
        margin-top: 30px;
        margin-bottom: 15px;
        font-size: 1.2rem;
        font-weight: bold;
    }

    /* GRID PRINCIPAL */
    .form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 2 Columnas iguales */
        gap: 20px; /* Espacio entre elementos */
        align-items: end; /* Alinea los inputs abajo */
    }

    /* CLASES UTILITARIAS */
    .full-width { grid-column: 1 / -1; } /* Fuerza a ocupar todo el ancho */
    
    label { 
        display: block; 
        margin-bottom: 8px; 
        font-weight: 600; 
        font-size: 0.9rem; 
        color: var(--cturquesa); 
    }
    
    input, select { 
        width: 100%; 
        padding: 12px; 
        border: 1px solid var(--cbordes); 
        border-radius: 6px; 
        box-sizing: border-box; 
        background: #2d2e30; 
        color: white; 
        font-size: 1rem;
    }
    
    input:focus, select:focus {
        outline: none;
        border-color: var(--cturquesa);
        background: #38393c;
    }

    /* CAJA ESPECIAL CHECKBOX */
    .checkbox-box {
        background: #38393c;
        padding: 15px;
        border-radius: 8px;
        border: 1px solid var(--cbordes);
        display: flex;
        align-items: center;
        height: 50px; /* Altura fija para alinear con inputs */
    }
    .checkbox-box input { width: auto; margin-right: 15px; cursor: pointer; }
    .checkbox-box label { margin: 0; color: white; cursor: pointer; }
    .checkbox-box small { margin-left: auto; color: #aaa; font-size: 0.8rem; }

    

    /* MOBILE */
    @media (max-width: 600px) {
        .form-grid { grid-template-columns: 1fr; } /* 1 columna en celular */
    }

    /* <------- Fin Editar Socios 

    /* Estilos Panel Intrcutor ---------> */

    .form-torneo-group.full-width { grid-column: 1 / -1; }

            
.hidden { display: none; }

        /* --- TABLAS --- */
.table-wrapper { overflow-x: auto; margin-top: 10px; }
.data-table { width: 100%; border-collapse: collapse; background: #2d2e30; border-radius: 8px; overflow: hidden; border: 1px solid var(--cbordes);}
.data-table th, .data-table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid var(--cbordes); font-size: 0.9rem; }
.data-table th { background-color: #38393c; color: var(--cturquesa); font-weight: 700; border-bottom: 2px solid var(--cbordes);}
.data-table tr:hover { background-color: #444; }
        
.btn-delete { background-color: #ef4444; color: white; border: none; padding: 6px 10px; border-radius: 4px; cursor: pointer; font-size: 0.8rem; font-weight: bold;}
.btn-delete:hover { background-color: #c92a2a; }

@media (max-width: 768px) {
         .header-row { flex-direction: column; text-align: center; gap: 15px;}
         .header-links { margin: 0; }
}

/*<------------- Fin Panel Instructor     */

/* Editar mis datos ---------------->     */

h2 { 
    color: var(--cturquesa); 
    border-bottom: 2px solid var(--cturquesa); 
    padding-bottom: 10px; 
    margin-top: 0;
}

.form-group { 
    margin-bottom: 15px; 
}
 
label { 
    display: block; 
    margin-bottom: 5px; 
    font-weight: 600; 
    color: var(--cturquesa); 
    font-size: 0.9rem; 
}

/*input { 
    width: 100%; 
    padding: 10px; 
    border-radius: 5px; 
    border: 1px solid var(--cbordes);
    background-color: #38393c; 
    color: white; 
    font-family: 'Segoe UI', sans-serif; 
    box-sizing: border-box;
}

input:focus { 
    outline: none; 
    border-color: var(--cturquesa); 
}*/
        
.read-only { 
    background-color: #2d2e30; 
    color: #888; 
    border-color: #444; 
    cursor: not-allowed; 
}
        
.alert { 
    padding: 10px; 
    border-radius: 5px; 
    margin-bottom: 15px; 
    background: #7c2d1f; 
    color: white; 
    border: 1px solid #ef4444; 
}

/*<------------- Fin editar mis datos     */

/* Cambio de contrasenia obligatorio ---------------->     */

 h1 { 
    color: var(--cturquesa); 
    font-size: 1.5rem; 
    font-weight: 700; 
}
 
p.subtitle { 
    color: var(--cletrasfondo); 
    font-size: 0.875rem; 
    margin-top: 0px; 
}

.form-group { 
    margin-bottom: 1.25rem; 
}
 
/*label { 
    display: block; 
    font-size: 0.875rem; 
    font-weight: 600; 
    color: #e0f2fe; 
    margin-bottom: 0.5rem; 
}*/
 
/*input { 
    width: 100%; 
    padding: 0.75rem; 
    border: 1px solid var(--cturquesa); 
    border-radius: 6px; 
    font-size: 1rem; 
    background-color: var(--cbordes); 
    color: #e0f2fe; 
}*/

/*<------------- Fin cambio de contraseña obligatorio     */

/* Inicio Recuperar contraseña  ---------------->     */

@media (max-width: 480px) {
    .login-header { 
        flex-direction: column; 
        text-align: center; 
        gap: 10px;
    }
    .header-text { 
        text-align: center; 
    }
 }

/*<------------- Fin recuperar contrasenia     */

/* Inicio cambio de contrase;a  ---------------->     */

@media (max-width: 480px) {
          
    .login-header { 
        flex-direction: column; 
        text-align: center; 
        gap: 10px; 
    }
  
    .header-text { 
            text-align: center; 
    }
}

/*<------------- Fin cambio de contrasenia     */

/* -------------> inicio socios.php */
.olvide {
    margin-top: 5px; 
    text-align: center; 
    text-decoration: none;
    font-size: 1rem;
   
    padding-bottom: 15px;
    border-bottom:1px solid var(--cbordes); 
   
    
}

.olvide a {
    color: var(--cturquesa); 
    text-decoration:dashed;
    font-weight: 400; 
    transition: color 0.2s;
    text-decoration: underline;
}

.olvide a:hover {
    color: white;
}