/* =============================================
   R4 CLUB - styles.css
   Diseño profesional y optimizado
   ============================================= */

/* ===== RESET Y VARIABLES CSS ===== */
:root {
    --red:      #e74c3c;
    --red-dark: #c0392b;
    --dark:     #2c3e50;
    --dark2:    #34495e;
    --blue:     #3498db;
    --blue-dark:#2980b9;
    --green:    #27ae60;
    --gray:     #7f8c8d;
    --gray-lt:  #bdc3c7;
    --gray-bg:  #f5f5f5;
    --white:    #ffffff;
    --shadow:   0 4px 12px rgba(0,0,0,0.1);
    --shadow-lg:0 8px 24px rgba(0,0,0,0.15);
    --radius:   8px;
    --trans:    all 0.25s ease;
}

* { margin:0; padding:0; box-sizing:border-box; }

html, body {
    width:100%; min-height:100%;
    font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
    background:var(--gray-bg);
    color:#333;
    line-height:1.5;
}

/* ===== PANTALLA DE CARGA / SELECTOR DE IDIOMA ===== */
.loading-screen {
    position:fixed; inset:0;
    background:linear-gradient(135deg, #e74c3c 0%, #c0392b 50%, #e74c3c 100%);
    background-size:400% 400%;
    animation:gradientShift 12s ease infinite;
    display:flex; justify-content:center; align-items:center;
    z-index:9999;
}

.loading-screen::before {
    content:''; position:absolute; inset:0;
    background:repeating-linear-gradient(45deg,transparent,transparent 35px,
        rgba(255,255,255,.05) 35px,rgba(255,255,255,.05) 70px);
    animation:slidePattern 18s linear infinite;
    pointer-events:none;
}

@keyframes gradientShift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes slidePattern  { to { transform:translateX(70px); } }

.loading-container { position:relative; z-index:10; }

.loading-content {
    background:rgba(255,255,255,.97);
    padding:50px 40px;
    border-radius:20px;
    box-shadow:0 20px 60px rgba(0,0,0,.3);
    max-width:480px; width:90vw;
    text-align:center;
    animation:scaleIn .7s ease-out;
}

.loading-content h1 {
    font-size:52px; font-weight:800;
    color:var(--red); letter-spacing:3px;
    margin-bottom:12px;
}

.language-instruction {
    font-size:15px; color:#666;
    margin-bottom:28px; line-height:1.7;
}

.language-buttons { display:flex; flex-direction:column; gap:12px; margin-bottom:16px; }

.lang-btn {
    padding:14px 24px; font-size:15px; font-weight:700;
    border:2px solid var(--red); background:white; color:var(--red);
    border-radius:var(--radius); cursor:pointer;
    transition:var(--trans); box-shadow:0 2px 8px rgba(231,76,60,.1);
}

.lang-btn:hover {
    background:var(--red); color:white;
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(231,76,60,.35);
}

.loading-subtitle { font-size:12px; color:#aaa; }

@keyframes fadeInUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes scaleIn  { from{opacity:0;transform:scale(.9)} to{opacity:1;transform:scale(1)} }

/* ===== NAVBAR ===== */
.navbar {
    background:linear-gradient(135deg, var(--dark) 0%, var(--dark2) 100%);
    position:sticky; top:0; z-index:100;
    box-shadow:0 4px 16px rgba(0,0,0,.2);
}

.navbar-container {
    max-width:1200px; margin:0 auto;
    padding:0 20px;
    display:flex; justify-content:space-between;
    align-items:center; height:68px;
}

.navbar-logo {
    font-size:26px; font-weight:800;
    color:var(--red); letter-spacing:1px;
    flex-shrink:0;
}

.nav-menu {
    display:flex; list-style:none; gap:0;
    flex:1; margin-left:32px;
}

.nav-link {
    display:flex; align-items:center; gap:7px;
    padding:18px 18px; color:#ecf0f1;
    text-decoration:none; transition:var(--trans);
    font-weight:500; white-space:nowrap;
}

.nav-link:hover { background:rgba(231,76,60,.2); color:var(--red); }
.nav-link .icon { font-size:18px; }
.nav-link .label { font-size:13px; }

.language-selector { margin-left:auto; margin-right:16px; }

.language-selector select {
    padding:7px 12px; border:2px solid var(--red);
    background:white; color:var(--dark);
    border-radius:6px; cursor:pointer;
    font-weight:700; transition:var(--trans);
    font-size:13px;
}

.language-selector select:hover { background:var(--red); color:white; }

.hamburger {
    display:none; flex-direction:column;
    cursor:pointer; gap:5px; padding:4px;
}
.hamburger span {
    width:24px; height:3px;
    background:#ecf0f1; border-radius:2px;
    transition:var(--trans);
}

/* ===== CONTENEDOR PRINCIPAL ===== */
.container {
    max-width:1200px; margin:0 auto;
    padding:28px 20px;
}

/* ===== BÚSQUEDA ===== */
.search-section {
    display:flex; gap:14px;
    margin-bottom:24px; flex-wrap:wrap;
}

.search-box {
    display:flex; flex:1; min-width:240px;
    background:white; border-radius:var(--radius);
    box-shadow:var(--shadow); overflow:hidden;
    border:1px solid var(--gray-lt);
    transition:var(--trans);
}

.search-box:focus-within {
    border-color:var(--red);
    box-shadow:0 0 0 3px rgba(231,76,60,.1), var(--shadow);
}

.search-input {
    flex:1; border:none; outline:none;
    padding:12px 16px; font-size:14px;
    background:transparent;
}

.search-btn {
    padding:12px 16px; background:var(--blue);
    color:white; border:none; cursor:pointer;
    font-size:16px; transition:var(--trans);
}
.search-btn:hover { background:var(--blue-dark); }

.create-btn {
    padding:12px 22px; background:var(--red);
    color:white; border:none; border-radius:var(--radius);
    cursor:pointer; font-weight:700; font-size:14px;
    transition:var(--trans); white-space:nowrap;
    box-shadow:0 2px 8px rgba(231,76,60,.25);
}
.create-btn:hover {
    background:var(--red-dark);
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(231,76,60,.35);
}

/* ===== FILTROS ===== */
.filters {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:14px; margin-bottom:28px;
    background:white; padding:18px 20px;
    border-radius:var(--radius); box-shadow:var(--shadow);
}

.filter-group { display:flex; flex-direction:column; gap:6px; }

.filter-group label {
    font-weight:700; color:var(--dark); font-size:12px;
    text-transform:uppercase; letter-spacing:.5px;
}

.filter-input {
    padding:10px 12px; border:1px solid var(--gray-lt);
    border-radius:6px; font-size:13px; transition:var(--trans);
}
.filter-input:focus {
    outline:none; border-color:var(--red);
    box-shadow:0 0 0 3px rgba(231,76,60,.1);
}

.clear-filters-btn {
    padding:10px 18px; background:var(--gray);
    color:white; border:none; border-radius:6px;
    cursor:pointer; font-weight:700; font-size:13px;
    transition:var(--trans); align-self:flex-end;
}
.clear-filters-btn:hover { background:var(--dark2); }

/* ===== LISTA DE ENTRADAS ===== */
.entries-list {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(290px, 1fr));
    gap:20px;
}

.entry-card {
    background:white; border-radius:10px;
    padding:20px; box-shadow:var(--shadow);
    cursor:pointer; transition:var(--trans);
    border-left:4px solid var(--blue);
    position:relative; overflow:hidden;
    user-select:none;
}

.entry-card::after {
    content:'🔓'; position:absolute;
    top:14px; right:14px;
    font-size:18px; opacity:.3;
    transition:var(--trans);
}

.entry-card:hover {
    transform:translateY(-4px);
    box-shadow:var(--shadow-lg);
}
.entry-card:hover::after { opacity:.7; }

.entry-card.temporary { border-left-color:#f39c12; }

.entry-title {
    font-size:17px; font-weight:700;
    color:var(--dark); margin-bottom:10px;
    word-break:break-word; padding-right:30px;
}

.entry-meta {
    display:flex; gap:8px; flex-wrap:wrap;
    font-size:12px; color:var(--gray);
}

.entry-badge {
    display:inline-block; padding:3px 10px;
    background:var(--blue); color:white;
    border-radius:20px; font-size:11px;
    font-weight:700;
}
.entry-badge.temporary { background:#f39c12; }

.loading {
    grid-column:1/-1; text-align:center;
    padding:50px; color:var(--gray); font-size:16px;
}

.error-msg { color:var(--red) !important; }

/* ===== MODALES ===== */
.modal {
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,.55); z-index:1000;
    justify-content:center; align-items:center;
    padding:16px;
}
.modal.show { display:flex; animation:fadeIn .25s ease; }

.modal-content {
    background:white; border-radius:14px;
    width:100%; max-width:600px;
    max-height:92vh; overflow-y:auto;
    box-shadow:0 16px 50px rgba(0,0,0,.35);
    animation:slideUp .25s ease;
}

.modal-header {
    display:flex; justify-content:space-between;
    align-items:center; padding:18px 22px;
    border-bottom:1px solid #ecf0f1;
    background:linear-gradient(135deg, var(--dark) 0%, var(--dark2) 100%);
    color:white; border-radius:14px 14px 0 0;
    position:sticky; top:0; z-index:10;
}

.modal-header h2 { margin:0; font-size:20px; font-weight:700; }

.close-btn {
    background:none; border:none;
    font-size:26px; cursor:pointer;
    color:white; opacity:.8;
    transition:var(--trans); line-height:1;
    padding:2px 6px; border-radius:4px;
}
.close-btn:hover { opacity:1; background:rgba(255,255,255,.15); transform:rotate(90deg); }

.modal-body { padding:24px 28px; }

/* ===== FORMULARIO ===== */
.form-group { margin-bottom:18px; }

.form-group label {
    display:block; margin-bottom:7px;
    font-weight:700; color:var(--dark); font-size:13px;
}

.form-group input[type="text"],
.form-group input[type="password"],
.form-group select {
    width:100%; padding:11px 14px;
    border:1px solid var(--gray-lt); border-radius:var(--radius);
    font-size:14px; transition:var(--trans);
    background:white;
}

.form-group input:focus,
.form-group select:focus {
    outline:none; border-color:var(--red);
    box-shadow:0 0 0 3px rgba(231,76,60,.12);
}

.form-group input[type="radio"] { margin-right:8px; accent-color:var(--red); }

/* Radio group */
.radio-group {
    display:flex; gap:20px;
    padding:10px 0;
}

.radio-label {
    display:flex; align-items:center;
    gap:6px; cursor:pointer;
    font-weight:600; color:var(--dark);
}

/* Editor área */
.editor {
    width:100%; min-height:280px;
    padding:14px; border:1px solid var(--gray-lt);
    border-radius:var(--radius); font-size:14px;
    line-height:1.7; background:white;
    transition:var(--trans);
    overflow-y:auto;
}
.editor:focus {
    border-color:var(--red);
    box-shadow:0 0 0 3px rgba(231,76,60,.1);
    outline:none;
}
.editor:empty:before {
    content:'Escribe el contenido aquí...';
    color:#aaa; pointer-events:none;
}

.editor-toolbar {
    display:flex; gap:4px; margin-bottom:8px;
    padding:8px 10px; background:#f8f9fa;
    border:1px solid var(--gray-lt); border-radius:var(--radius);
    flex-wrap:wrap;
}

.editor-btn {
    padding:6px 11px; background:white;
    border:1px solid var(--gray-lt); border-radius:4px;
    cursor:pointer; font-weight:700;
    font-size:13px; transition:var(--trans);
    min-width:32px; text-align:center;
}
.editor-btn:hover {
    background:var(--red); color:white;
    border-color:var(--red);
}

.form-actions { display:flex; gap:10px; margin-top:24px; }

/* ===== BOTONES ===== */
.btn-primary {
    flex:1; padding:12px 20px; background:var(--red);
    color:white; border:none; border-radius:var(--radius);
    cursor:pointer; font-weight:700; font-size:14px;
    transition:var(--trans);
}
.btn-primary:hover { background:var(--red-dark); transform:translateY(-1px); }
.btn-primary:disabled { background:var(--gray); cursor:not-allowed; transform:none; }

.btn-secondary {
    flex:1; padding:12px 20px; background:var(--gray);
    color:white; border:none; border-radius:var(--radius);
    cursor:pointer; font-weight:700; font-size:14px;
    transition:var(--trans);
}
.btn-secondary:hover { background:var(--dark2); }

.btn-danger {
    flex:1; padding:12px 20px; background:#c0392b;
    color:white; border:none; border-radius:var(--radius);
    cursor:pointer; font-weight:700; font-size:14px;
    transition:var(--trans);
}
.btn-danger:hover { background:#a93226; }

/* ===== VISTA DE ENTRADA ===== */
.view-content {
    background:#f8f9fa; padding:20px;
    border-radius:var(--radius); margin-bottom:18px;
    line-height:1.8; word-break:break-word;
    min-height:80px;
}

.entry-info {
    background:#ecf0f1; padding:14px 16px;
    border-radius:var(--radius); margin-bottom:20px;
    font-size:13px;
}
.entry-info p { margin:6px 0; color:var(--dark2); }

.view-actions { display:flex; gap:10px; }

/* ===== MODAL DE CONTRASEÑA ===== */
.password-modal { max-width:400px; }

.password-input {
    width:100%; padding:12px 14px;
    border:1px solid var(--gray-lt); border-radius:var(--radius);
    font-size:15px; margin-bottom:16px;
    transition:var(--trans);
}
.password-input:focus {
    outline:none; border-color:var(--red);
    box-shadow:0 0 0 3px rgba(231,76,60,.12);
}

.about-content { max-width:750px; }

/* ===== ANIMACIONES ===== */
@keyframes fadeIn  { from{opacity:0}       to{opacity:1} }
@keyframes slideUp { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }

/* ===== TABLAS (en contenido) ===== */
table { width:100%; border-collapse:collapse; margin:14px 0; }
table td, table th { border:1px solid var(--gray-lt); padding:9px 12px; text-align:left; }
table th { background:#ecf0f1; font-weight:700; }
table tr:hover { background:#fafafa; }

/* ===== MISC ===== */
img { max-width:100%; height:auto; }

code {
    background:#f4f4f4; padding:2px 6px;
    border-radius:3px; font-family:'Courier New',monospace;
    font-size:13px;
}

pre {
    background:#f4f4f4; padding:14px;
    border-radius:var(--radius); overflow-x:auto;
    font-size:13px;
}

a { color:var(--blue); text-decoration:none; transition:var(--trans); }
a:hover { color:var(--blue-dark); text-decoration:underline; }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .navbar-container { height:58px; padding:0 12px; gap:8px; }
    .navbar-logo { font-size:18px; margin-right:auto; }

    .nav-menu {
        position:absolute; top:58px; left:0;
        width:100%; flex-direction:column;
        background:var(--dark);
        max-height:0; overflow:hidden;
        transition:max-height .3s ease;
        margin-left:0;
        box-shadow:0 10px 20px rgba(0,0,0,.2);
    }
    .nav-menu.active { max-height:320px; }
    .nav-link { padding:14px 20px; border-bottom:1px solid #3d5166; }

    .hamburger { display:flex; margin-left:4px; }
    
    /* FIX Selector Idioma Móvil */
    .language-selector { margin-left:0; margin-right:0; display:block; }
    .language-selector select { padding:6px 8px; font-size:12px; }

    .search-section { flex-direction:column; }
    .create-btn { width:100%; }
    .filters { grid-template-columns:1fr; }
    .entries-list { grid-template-columns:1fr; }

    .modal-content { max-width:98%; }
    .modal-body { padding:18px 16px; }
    .form-actions { flex-direction:column; }
    .view-actions { flex-direction:column; }

    .loading-content { padding:36px 20px; }
    .loading-content h1 { font-size:36px; }
    .lang-btn { padding:12px 16px; font-size:14px; }
}

@media (max-width: 480px) {
    .navbar-logo { font-size:18px; }
    .loading-content h1 { font-size:28px; }
    .loading-content { padding:28px 14px; }
    .container { padding:14px 10px; }
    .entry-card { padding:14px; }
    .entry-title { font-size:15px; }
    .editor { min-height:200px; }
    .modal-header h2 { font-size:17px; }
}