:root {--bg: #2c3e50; --fg: #fff; --accent: #4CAF50; --secondary: #FF5722;}
    :root{--radius:5px;--shadow:0 4px 5px rgba(0,0,0,.08);--text:#222;--muted:#666;--bg-page:#f5f5f5;--primary:#2563eb;--sidebar-width:300px;--transition:all .3s ease;--gap:2rem;}

    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: "Poppins", sans-serif; background: #f0f0f0; }
    
    
    header {background: var(--bg); backdrop-filter: blur(8px); position: sticky; top: 0; width: 100%; z-index: 100;}
    .container {max-width: 1600px; margin: auto; padding: 1.8rem 1.2rem; display: flex; align-items: center; justify-content: space-between;}
    .logo { font-size: 1.5rem; font-weight: bold; color: #fff;}
  
  
    nav { display: flex; align-items: center; gap: 1.5rem; }
    nav a { color: var(--fg); text-decoration: none; font-weight: 500; transition: color 0.3s; }
    nav a:hover { color: var(--accent); }
    .btn {padding: 0.4rem 0.9rem; border-radius: 20px; font-weight: bold; border: none; cursor: pointer; font-size: 0.9rem; transition: transform 0.2s, background 0.3s;}
    
    .login-btn {background: var(--accent); color: #fff; padding: 0.4rem 0.9rem; border-radius: 20px; font-weight: bold; text-decoration: none; transition: transform 0.2s, background 0.3s;}
    .login-btn:hover {background: green; color: #fff; transition: transform 0.2s, background 0.3s;}
    
    .register-btn {background: red; color: #fff; padding: 0.4rem 0.9rem; border-radius: 20px; font-weight: bold; text-decoration: none; transition: transform 0.2s, background 0.3s;}
    .register-btn:hover {background: #C11007; color: #fff; transition: transform 0.2s, background 0.3s;}
    
    
    .logout-btn {background: var(--accent); color: #fff; padding: 0.4rem 0.9rem; border-radius: 20px; font-weight: bold; text-decoration: none; transition: transform 0.2s, background 0.3s; }
    .logout-btn:hover {background: green; color: #fff; transition: transform 0.2s, background 0.3s;}
    
    
    .nav-user {display: flex; align-items: center; gap: 0.5rem; font-weight: 500; color: var(--fg);}
    .user-avatar {width: 35px; height: 35px; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent); cursor: pointer;}
    .user-avatar:hover {opacity: 0.9;}
    
    
    .menu-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; }
    .menu-toggle span {width: 25px; height: 3px; background: var(--fg); border-radius: 2px; transition: 0.3s;}






    /* Modales ============================================================== */
    .modal {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;}
    .modal.active { opacity: 1; visibility: visible; }
    .modal-content {background: #fff; padding: 2rem; border-radius: 8px; width: 550px; max-width: 90%; text-align: center; animation: slideDown 0.3s ease;}
    .modal-content h2 { margin-bottom: 1rem; }
    .modal-content input, .modal-content select {width: 100%; padding: 0.5rem; margin-bottom: 1rem; border: 1px solid #ccc; border-radius: 3px;}
    .modal-content input:focus::placeholder {color: #D6D3D1;}
    .modal-content input:focus, .modal-content textarea:focus, .modal-content select:focus {border-color: #57534D; outline: none; box-shadow: 0 0 4px #A6A09B; transition: border-color 0.3s, box-shadow 0.3s;}
    .modal-content label {display: block; text-align: left; font-size: 0.85rem; margin-bottom: 0.3rem; color: #333;}
    
    .modal-content button, .modal-content .label{width: 100%; padding: 0.6rem; border: none; border-radius: 5px; background: var(--accent); color: #fff; font-weight: bold; cursor: pointer; transition: background 0.3s;}
    .modal-content .label{text-align: center;}
    .modal-content button:hover, .modal-content .label:hover { background: #3e8e41; }
    
    #alert-login {display: block; margin-bottom: 15px; font-size: 14px;}
    
    .purple-color {color: purple;}
    .green-color {color: green;}
    .red-color {color: red;}
    
    .close-btn {background: #ccc; margin-top: 0.5rem;}
    
    .form-msg{margin:2px 0 20px;font-size:14px;line-height:1.35;min-height:1.2em}
    .form-msg.is-error{color:#b91c1c}
    .form-msg.is-success{color:#047857}
    /*========================================================================*/




    .avatar-preview {width: 80px; height: 80px; border-radius: 50%; margin: 0 auto 1rem; border: 2px solid #ccc; background-size: cover; background-position: center;}
    @keyframes slideDown {
        from { transform: translateY(-20px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }
    
    
    
    
    
    table {border-collapse: collapse; width: 100%; background-color: white; box-shadow: 0 2px 5px rgba(0,0,0,0.05);}
    td, th {border: 1px solid #d3d9e3; padding: 4px 6px; vertical-align: middle;}
    .title {text-align: center; font-weight: bold; font-size: 12pt; color: #2c3e50;}
    .subtitle {text-align: center; font-size: 10pt; color: #5f6d7a;}
    .section-title {font-weight: bold; background-color: #e8eff7; color: #34495e; }
    input, textarea {width: 100%; border: none; font-family: inherit; font-size: inherit; resize: none; padding: 2px; background-color: transparent;}
    input, textarea {margin: 5px 0;}
    textarea {height: 8mm;}
    
    .asides {background-color: #f0f4f8; border-left: 4px solid #2980b9; padding: 8px 12px; margin: 8px 0; font-size: 9pt; color: #34495e;}
    .asides h4 {margin-top: 0; font-size: 10pt; color: #2980b9;}
    
    .fut-fecha{text-align:right;padding-top:12px;padding-right:15px;font-weight:bold;color:#34495e;border-bottom:40px solid transparent;}


    #fut input.is-filled:not(:disabled), #fut textarea.is-filled:not(:disabled){color: #2f6fed;}
    #fut input:focus:not(:disabled), #fut textarea:focus:not(:disabled){outline: none;}
    #fut input::placeholder, #fut textarea::placeholder{color: #9ca3af; opacity: 1;}

    
    .is-locked{color: #1e40af; font-weight: 500; cursor: not-allowed;}
    .is-locked:focus{outline: none;}
    

    footer {background-color: #2c3e50; color: white; text-align: center; font-size: 9pt; padding: 10px; margin-top: 20px;}
    footer a {color: #ecf0f1; text-decoration: none; }
    footer a:hover {text-decoration: underline;}
    
    
    
    
    
    
    
    
    
/*@media (min-width: 1200px){} 
@media (min-width: 768px) and (max-width: 1199px){}
@media (max-width: 767px){}
@media (max-width: 480px){}*/





/* ========== ≥1200px: desktop grande ========== */
@media (min-width: 1200px) {
  .container { padding: 2rem 1.5rem; gap: 2rem; }
  .logo { font-size: 1.75rem; }
  nav a { font-size: 1rem; }
  .user-avatar { width: 40px; height: 40px; }

  /* Lienzo central más ancho, columna lateral visible */
  body { background: var(--bg-page); }
  .menu-toggle { display: none; }

  /* Zona principal del FUT */
  .title { font-size: 14pt; }
  .subtitle { font-size: 11pt; }
  table { font-size: 1rem; }
  td, th { padding: 8px 10px; }

  /* Modal un poco más grande en pantallas amplias */
  .modal-content { width: 700px; }
}

/* ========== 768px–1199px: laptop/tablet horizontal ========== */
@media (min-width: 768px) and (max-width: 1199px) {
  .container { padding: 1.4rem 1rem; gap: 1rem; }
  .logo { font-size: 1.4rem; }
  nav { gap: 1rem; }
  nav a { font-size: 0.95rem; }
  .user-avatar { width: 36px; height: 36px; }

  /* Layout: lateral más angosta, contenido principal un poco más ancho */
  body { background: var(--bg-page); }
  .menu-toggle { display: none; }

  /* El wrapper que pusiste con display:flex */
  /* Columna izquierda 20%, contenido 60%, se mantiene la derecha si existe */
  body > div[style*="display: flex;"] > div:nth-child(1) { width: 20% !important; }
  body > div[style*="display: flex;"] > div:nth-child(2) { width: 60% !important; }

  /* Tablas: tipografía y padding moderados */
  table { font-size: 0.95rem; }
  td, th { padding: 6px 8px; }

  /* Modal: ancho medio */
  .modal-content { width: 600px; max-width: 92%; }

  /* Botones más compactos */
  .btn, .login-btn, .register-btn, .logout-btn { padding: 0.45rem 0.9rem; }
}

/* ========== ≤767px: tablet vertical y móviles ========== */
@media (max-width: 767px) {
  /* Header: activar hamburguesa y apilar */
  header .container { flex-wrap: wrap; gap: .75rem; }
  nav { 
    display: none; 
    width: 100%;
    flex-direction: column; 
    gap: .75rem; 
    padding-bottom: .5rem;
  }
  nav.active { display: flex; }
  .menu-toggle { display: flex; }
  .logo { font-size: 1.25rem; }

  /* Layout principal: columna única */
  body > div[style*="display: flex;"] { flex-direction: column; gap: 1rem; }
  body > div[style*="display: flex;"] > div:nth-child(1) { display: none !important; }
  body > div[style*="display: flex;"] > div:nth-child(2) { width: 100% !important; border-width: 0; }
  body { background: var(--bg-page); }

  /* Contenedor blanco del FUT */
  body > div[style*="display: flex;"] > div:nth-child(2) > div { width: 100% !important; }
  .title { font-size: 12pt; }
  .subtitle { font-size: 9.5pt; }

  /* Tablas: scroll horizontal si no caben */
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  td, th { white-space: nowrap; padding: 6px; }
  .section-title { font-size: 0.95rem; }

  /* Inputs/textarea: toque amigable */
  input, textarea, select { font-size: 16px; } /* evita zoom en iOS */
  textarea { height: 90px; }

  /* Bloques de ayuda más compactos */
  .asides { font-size: 0.9rem; padding: 8px 10px; }

  /* Firma: línea más ancha en móviles */
  #firma_usuario { width: 80% !important; }
  .fut-fecha { text-align: left; padding-right: 0; }

  /* Modal ajustado a móvil */
  .modal-content { width: 92%; padding: 1.25rem; }
  .modal-content input, .modal-content select { font-size: 16px; }

  /* Botón submit full width */
  #btn-fut { width: 100%; padding: 12px 16px !important; }

  /* Avatar y chips */
  .user-avatar { width: 32px; height: 32px; }
}

/* ========== ≤480px: móviles pequeños ========== */
@media (max-width: 480px) {
  header .container { padding: 1rem .9rem; }
  .logo { font-size: 1.1rem; }
  .menu-toggle span { width: 22px; }

  /* Tipos de letra un pelín más pequeños en tablas */
  table { font-size: 0.9rem; }
  td, th { padding: 5px; }

  /* Inputs en filas densas */
  input, textarea { margin: 4px 0; }

  /* Botones compactos */
  .btn, .login-btn, .register-btn, .logout-btn { 
    width: 100%;
    padding: 0.55rem 1rem; 
    border-radius: 14px;
    text-align: center;
  }

  /* Alert login: stack y menos padding */
  [role="alert"][aria-live="assertive"] {
    flex-direction: column;
    gap: 10px;
  }
  [role="alert"] button { width: 100%; }

  /* Logos del encabezado del FUT */
  table img { max-width: 120px; height: auto; }
}