/* =========================================================
   UniTorneos - Liquid Glass + Neumorphism Optimized
   Todos los botones estilizados, panel admin organizado
   ========================================================= */

/* -------------------------
   Root variables
------------------------- */
:root {
  --bg: #eef3fb;
  --surface: rgba(255,255,255,0.52);
  --surface-strong: rgba(255,255,255,0.7);
  --glass-border: rgba(255,255,255,0.6);
  --glass-border-2: rgba(255,255,255,0.35);
  --text: #122034;
  --muted: #6b7280;
  --accent-1: #1657F0;
  --accent-2: #36D7E0;
  --accent-gradient: linear-gradient(90deg,var(--accent-1),var(--accent-2));
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow-soft: 12px 16px 28px rgba(8,12,30,0.08);
  --shadow-inset: inset 6px 6px 18px rgba(10,16,35,0.06), inset -6px -6px 16px rgba(255,255,255,0.7);
  --glass-blur: blur(10px);
  --glass-backdrop: saturate(120%) contrast(105%);
  --btn-padding: 12px 22px;
  --btn-radius: 12px;
  --transition: 220ms ease;
  --max-width: 1100px;
  --nav-height: 64px;
  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* -------------------------
   Base & Container
------------------------- */
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--font);
  background: linear-gradient(180deg, #f5f8ff 0%, var(--bg) 100%);
  color:var(--text);
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.container{
  max-width:var(--max-width);
  margin:0 auto;
  padding:20px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.center{display:flex;align-items:center;justify-content:center;}

/* -------------------------
   Navbar
------------------------- */
.navbar{
  position:sticky;
  top:0;
  z-index:50;
  height:var(--nav-height);
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 20px;
  backdrop-filter: var(--glass-blur) var(--glass-backdrop);
  background: linear-gradient(180deg, rgba(255,255,255,0.54), rgba(255,255,255,0.34));
  border-bottom:1px solid var(--glass-border);
  box-shadow: 0 6px 20px rgba(10,16,35,0.04);
}
.navbar .nav-logo{font-weight:800;font-size:1.05rem;color:var(--text);text-decoration:none;}
.navbar ul{display:flex;gap:12px;list-style:none;margin:0;padding:0;align-items:center;}
.navbar a{color:var(--text);text-decoration:none;padding:8px 12px;font-weight:600;border-radius:10px;transition:all var(--transition);}
.navbar a:hover{color:var(--accent-1);transform:translateY(-2px);}
.btn-link{background:transparent;border:none;color:var(--text);cursor:pointer;font-weight:600;padding:8px 12px;border-radius:10px;}

/* -------------------------
   Hero / Title
------------------------- */
.hero-title-section{text-align:center;padding:40px 20px 10px;}
.big-title{font-size:2.8rem;margin:8px 0 6px;font-weight:800;color:var(--text);letter-spacing:-0.6px;}
.subtitle{max-width:920px;margin:0 auto;color:var(--muted);font-size:1.05rem;}

/* -------------------------
   Info & Cards
------------------------- */
.info-section{padding:28px 20px;}
.info-container{margin:18px auto;background:var(--surface);border-radius:var(--radius-lg);padding:22px;max-width:var(--max-width);box-shadow:var(--shadow-soft);border:1px solid var(--glass-border-2);backdrop-filter: var(--glass-blur) var(--glass-backdrop);}
.info-title{font-size:1.6rem;margin-bottom:8px;font-weight:700;}
.info-text{color:var(--muted);font-size:1rem;}
.info-list{margin:12px 0 0;padding-left:18px;color:var(--muted);}
.info-list li{margin:8px 0;}

/* -------------------------
   Carrusel
------------------------- */
.carrusel-section{padding:18px 20px;}
.carrusel{max-width:var(--max-width);margin:0 auto;border-radius:18px;overflow:hidden;background: linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0.28));border:1px solid var(--glass-border);box-shadow: 0 14px 30px rgba(12,18,40,0.06);}
.carrusel img{width:100%;height:360px;object-fit:cover;display:none;transition:opacity 400ms ease;}
.carrusel img.active{display:block;opacity:1;}

/* -------------------------
   Panel Admin Secciones (MODIFICADO para Grid Card Layout)
------------------------- */
.admin-panel{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    width: 100%;
    max-width: var(--max-width);
    margin: 20px auto;
}

/* ESTILO NUEVO: Tarjeta de opción del administrador */
.admin-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 180px;
    padding: 20px;
    background: var(--surface-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--glass-border-2);
    transition: transform var(--transition);
    cursor: pointer;
    text-decoration: none;
    color: var(--text);
}

.admin-card:hover {
    transform: translateY(-5px);
    box-shadow: 12px 16px 35px rgba(8,12,30,0.12);
}

/* Estilo para el contenido de la tarjeta */
.admin-card img, .admin-card .icon {
    width: 64px;
    height: 64px;
    margin-bottom: 12px;
    opacity: 0.8;
}
.admin-card a, .admin-card span {
    font-weight: 700;
    font-size: 1rem;
    color: var(--accent-1);
}

/* Dejamos .admin-section y sus sub-estilos por si se usan en otras vistas */
.admin-section{background:var(--surface);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow-soft);border:1px solid var(--glass-border-2);}
.admin-section h3{font-size:1.5rem;margin-bottom:12px;color:var(--accent-1);}
.admin-section .section-content{display:flex;flex-wrap:wrap;gap:12px;}

/* -------------------------
   Buttons (all improved)
------------------------- */
.btn-primary, .btn-edit, .btn-delete, .btn-outline, .btn-google {
  border:none;
  border-radius:var(--btn-radius);
  cursor:pointer;
  font-weight:700;
  transition: all var(--transition);
  padding:var(--btn-padding);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  margin:8px 4px;
  box-shadow: 5px 5px 15px rgba(0,0,0,0.08), -5px -5px 15px rgba(255,255,255,0.7);
}
.btn-primary{background: var(--accent-gradient);color:white;}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.05);}
.btn-edit{background:#36D7E0;color:white;}
.btn-delete{background:#F04242;color:white;}
.btn-outline{background:transparent;color:var(--accent-1);border:1px solid rgba(22,87,240,0.14);}
.btn-google{background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(245,245,245,0.95));color:var(--text);gap:10px;}

/* -------------------------
   Forms
------------------------- */
.form-container{max-width:480px;margin:18px auto;padding:26px;border-radius:14px;background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0.36));border:1px solid var(--glass-border);box-shadow: var(--shadow-soft);}
input,select,textarea{width:100%;padding:12px 14px;border-radius:12px;border:none;background: linear-gradient(180deg, rgba(245,248,255,0.9), rgba(240,244,255,0.92));box-shadow: var(--shadow-inset);outline:none;color:var(--text);transition:all var(--transition);}
input:focus,select:focus,textarea:focus{box-shadow: 0 8px 22px rgba(10,20,60,0.06);transform:translateY(-2px);border:1px solid rgba(22,87,240,0.12);}
textarea{min-height:96px;resize:vertical;padding:12px;}
.helper{font-size:0.85rem;color:var(--muted);margin-top:6px;}

/* -------------------------
   Tables
------------------------- */
.tabla-datos{width:100%;border-collapse:collapse;overflow:hidden;border-radius:12px;}
.tabla-datos thead th{text-align:center;padding:12px 10px;background: rgba(255,255,255,0.55);color:var(--text);font-weight:700;font-size:0.95rem;border-bottom:1px solid rgba(0,0,0,0.04);}
.tabla-datos tbody td{padding:12px 10px;text-align:center;color:var(--text);font-size:0.95rem;background: linear-gradient(180deg, rgba(255,255,255,0.25), rgba(255,255,255,0.18));border-bottom:1px solid rgba(0,0,0,0.03);}
.tabla-datos tbody tr:hover td{transform:translateY(-3px);background: linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0.26));transition:all 200ms ease;}
.sin-datos{padding:24px;text-align:center;color:var(--muted);}

/* -------------------------
   Modal
------------------------- */
.modal-fondo{position:fixed;inset:0;background: rgba(5,10,25,0.45);display:none;align-items:center;justify-content:center;z-index:120;padding:20px;}
.modal-fondo.visible{display:flex;}
.modal-contenido{width:100%;max-width:520px;background: linear-gradient(180deg, rgba(255,255,255,0.62), rgba(255,255,255,0.42));border-radius:14px;padding:20px;border:1px solid var(--glass-border);box-shadow: 0 18px 40px rgba(7,12,30,0.18);}
.cerrar-modal{position:absolute;right:18px;top:14px;cursor:pointer;background:transparent;border:none;font-size:20px;color:var(--muted);}

/* -------------------------
   Footer
------------------------- */
.footer{margin-top:40px;padding:40px 20px;background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.32));backdrop-filter: blur(12px) saturate(120%);-webkit-backdrop-filter: blur(12px) saturate(120%);border-top:1px solid rgba(255,255,255,0.45);box-shadow: 0 -18px 40px rgba(12,18,40,0.05);}
.footer-container{max-width:1000px;margin:0 auto;text-align:center;}
.footer-title{font-size:1.35rem;font-weight:800;margin:0;color:var(--text);letter-spacing:-0.3px;}
.footer-desc{margin-top:10px;color:var(--muted);font-size:0.95rem;max-width:680px;margin-left:auto;margin-right:auto;line-height:1.5;}
.footer-subtitle{font-size:1.1rem;margin-bottom:10px;font-weight:700;color:var(--text);}
.footer-list{list-style:none;padding:0;margin:0;color:var(--muted);font-size:0.95rem;}
.footer-list li{margin:6px 0;}
.footer-link{display:inline-block;margin-top:6px;font-weight:700;color:var(--accent-1);text-decoration:none;transition:all 200ms ease;}
.footer-link:hover{color:var(--accent-2);transform:translateY(-2px);}
.footer-bottom{margin-top:32px;font-size:0.9rem;color:var(--muted);border-top:1px solid rgba(255,255,255,0.3);padding-top:16px;}

/* -------------------------
   Responsive
------------------------- */
@media (max-width:768px){.navbar ul{flex-direction:column;gap:10px;}.container{padding:12px;}.big-title{font-size:2.2rem;}.subtitle{font-size:0.95rem;}.btn-primary,.btn-edit,.btn-delete{padding:10px 18px;}}
@media (max-width:480px){.big-title{font-size:1.8rem;}.subtitle{font-size:0.9rem;}.tabla-datos thead th,.tabla-datos tbody td{font-size:0.85rem;padding:8px;}}

/* ==========================
   End Optimized style.css
========================== */