/* =====================================================
   CRYVITY - VARIABLES (SIEMPRE ARRIBA)
===================================================== */

:root{
  --cry-primary:#2563eb;
  --cry-primary-hover:#1d4ed8;
  --cry-danger:#ef4444;
  --cry-danger-hover:#dc2626;
  --cry-text:#0f172a;
  --cry-text-light:#64748b;
  --cry-bg:#f8fafc;
  --cry-card:#ffffff;
  --cry-radius:20px;
  --cry-shadow:0 8px 30px rgba(0,0,0,0.06);
  --cry-shadow-hover:0 16px 45px rgba(0,0,0,0.12);
}


/* =============================
   BASE GLOBAL
============================= */

*{ 
  box-sizing:border-box; 
}

body{
  margin:0;
  font-family:'Segoe UI',Roboto,sans-serif;
  background:#f4f6f9;
  padding-top:60px;
  line-height:1.5;
  color:var(--cry-text);
}


/* =====================================================
   AUTH
   ⚠️ IMPORTANTE: cambia XX y YY por IDs reales
===================================================== */

body.page-id-XX,
body.page-id-YY{
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:20px;
  background:linear-gradient(135deg,#6a11cb 0%,#2575fc 100%);
}

.um-register,
.um-login{
  background:#fff;
  width:100%;
  border-radius:20px;
  box-shadow:0 15px 50px rgba(0,0,0,0.25);
  transition:all .3s ease;
}

.um-register{ max-width:550px; padding:40px 35px; }
.um-login{ max-width:450px; padding:40px 35px; }

.um-register:hover,
.um-login:hover{
  transform:translateY(-5px);
  box-shadow:0 20px 60px rgba(0,0,0,0.35);
}

.um-login h3.um-login-title{
  text-align:center;
  margin-bottom:25px;
}


/* =====================================================
   INPUTS
===================================================== */

.um-field input,
.um-field textarea{
  width:100%;
  padding:14px;
  border:1px solid #ddd;
  border-radius:10px;
  margin-bottom:18px;
  font-family:inherit;
  transition:all .2s ease;
}

.um-field input:focus,
.um-field textarea:focus{
  border-color:#0073e6;
  box-shadow:0 0 8px rgba(0,115,230,.3);
  outline:none;
}


/* =====================================================
   BOTONES
===================================================== */

.um-submit{
  background:#0073e6;
  color:#fff;
  padding:16px;
  border:none;
  border-radius:12px;
  width:100%;
  cursor:pointer;
  transition:all .25s ease;
}

.um-submit:hover{
  background:#005bb5;
}


/* =====================================================
   PANEL
===================================================== */

.cryvity-panel{
  display:flex;
  gap:20px;
  max-width:1200px;
  margin:20px auto;
  padding:20px;
  background:#f4f7fb;
  border-radius:12px;
  box-shadow:0 15px 40px rgba(0,0,0,0.08);
}

.cryvity-menu{
  width:240px;
  background:#052142;
  padding:25px;
  border-radius:14px;
  color:#fff;
}

.cryvity-menu a{
  display:flex;
  padding:12px;
  border-radius:10px;
  color:#fff;
  text-decoration:none;
  transition:.2s;
}

.cryvity-menu a:hover{
  background:rgba(14,98,199,.3);
}

.menu-activo{
  background:linear-gradient(135deg,#2563eb,#3b82f6);
}

.cryvity-contenido{
  flex:1;
  padding:25px;
}


/* =====================================================
   TARJETAS
===================================================== */

.cryvity-card{
  background:#fff;
  padding:18px;
  border-radius:12px;
  box-shadow:0 6px 16px rgba(0,0,0,0.06);
  transition:.25s ease;
}

.cryvity-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--cry-shadow-hover);
}


/* =====================================================
   DASHBOARD
===================================================== */

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

.dash-box{
  background:#fff;
  padding:20px;
  border-radius:20px;
  box-shadow:var(--cry-shadow);
  text-align:center;
}

.dash-box strong{
  font-size:26px;
}


/* =====================================================
   TABLA CLIENTES
===================================================== */

.clientes-table{
  width:100%;
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  border-collapse:collapse;
}

.clientes-table th{
  background:#091B36;
  color:#fff;
  padding:14px;
  text-align:left;
}

.clientes-table td{
  padding:12px;
  border-bottom:1px solid #eee;
}

.clientes-table tr:hover{
  background:#f5f9ff;
}


/* =====================================================
   FORMULARIOS
===================================================== */

.cryvity-card input,
.cryvity-card textarea,
.cryvity-card select{
  width:100%;
  padding:12px;
  border-radius:12px;
  border:1px solid #ddd;
  font-family:inherit;
}


/* =====================================================
   BOTONES CUSTOM
===================================================== */

.cryvity-btn{
  background:linear-gradient(135deg,#2563eb,#3b82f6);
  color:#fff;
  padding:10px 15px;
  border-radius:8px;
  border:none;
  cursor:pointer;
  transition:.2s;
}

.cryvity-btn:hover{
  opacity:.9;
}

.cryvity-btn.delete{
  background:linear-gradient(135deg,#ef4444,#f87171);
}


/* =====================================================
   MODAL
===================================================== */

#cryvity-demo-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.6);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.cryvity-demo-box{
  background:#fff;
  padding:35px;
  border-radius:20px;
  max-width:450px;
  width:100%;
  animation:cryvityFade .3s ease;
}


/* =====================================================
   ANIMACIÓN
===================================================== */

@keyframes cryvityFade{
  from{ transform:scale(.95); opacity:0; }
  to{ transform:scale(1); opacity:1; }
}


/* =====================================================
   TOPBAR ADMIN
===================================================== */

#cryvity-admin-topbar{
  position:fixed;
  top:0;
  width:100%;
  height:60px;
  background:#6C5CE7;
  color:#fff;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 20px;
  z-index:9999;
}

#cryvity-admin-topbar a{
  background:#ff4757;
  padding:8px 12px;
  border-radius:5px;
  color:#fff;
  text-decoration:none;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width:900px){
  .cryvity-panel{
    flex-direction:column;
  }

  .cryvity-menu{
    width:100%;
  }
}

@media (max-width:768px){

  .cryvity-dashboard{
    grid-template-columns:1fr;
  }

  .clientes-table thead{
    display:none;
  }

  .clientes-table,
  .clientes-table tbody,
  .clientes-table tr,
  .clientes-table td{
    display:block;
    width:100%;
  }

  .clientes-table tr{
    margin-bottom:15px;
    padding:10px;
    box-shadow:0 4px 15px rgba(0,0,0,0.05);
    border-radius:12px;
    background:#fff;
  }

  .clientes-table td{
    border:none;
    padding:8px 10px;
  }
}