:root{
  --ink: #16233F;
  --ink-soft: #24365C;
  --bg: #F6F4EF;
  --panel: #FFFFFF;
  --gold: #B8902E;
  --gold-soft: #E7D9B4;
  --text: #202A3B;
  --text-muted: #6B7280;
  --line: #E7E2D6;
  --green: #1E7A46;
  --green-soft: #E4F1E8;
  --red: #B3261E;
  --red-soft: #FBE9E7;

  --sidebar-w: 240px;
  --sidebar-w-collapsed: 76px;
  --radius: 12px;
  --transition: 220ms cubic-bezier(.4,0,.2,1);
}

*{ box-sizing: border-box; }

html, body{
  margin:0; padding:0;
  height:100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
}

.app{
  display:flex;
  min-height:100vh;
}

/* ---------- SIDEBAR ---------- */
.sidebar{
  width: var(--sidebar-w);
  background: var(--ink);
  color: #EDEFF4;
  display:flex;
  flex-direction:column;
  flex-shrink:0;
  transition: width var(--transition);
  overflow:hidden;
  position: relative;
}

.sidebar.collapsed{
  width: var(--sidebar-w-collapsed);
}

.sidebar-header{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 22px 20px 20px;
  white-space:nowrap;
  position: relative;
}

.seal{
  color: var(--gold);
  flex-shrink:0;
  display:flex;
}

.brand-text{
  font-family:'Fraunces', serif;
  font-size: 1.2rem;
  font-weight:600;
  letter-spacing:.02em;
  opacity:1;
  transition:opacity 160ms ease;
  flex:1;
}

.sidebar.collapsed .brand-text{
  opacity:0;
  pointer-events:none;
}

.collapse-toggle{
  position:absolute;
  right:-13px;
  top: 26px;
  width: 26px;
  height: 26px;
  border-radius:50%;
  background: var(--gold);
  color: var(--ink);
  border: 2px solid var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:5;
  transition: transform var(--transition);
}

.sidebar.collapsed .collapse-toggle svg{
  transform: rotate(180deg);
}

.nav{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding: 8px 12px;
  flex:1;
}

.nav-item{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  padding: 12px 12px;
  border:none;
  background:transparent;
  color: #C7CCDA;
  border-radius: 10px;
  cursor:pointer;
  font-family:'Inter', sans-serif;
  font-size: .92rem;
  font-weight:500;
  white-space:nowrap;
  text-align:left;
  position:relative;
  transition: background var(--transition), color var(--transition);
}

.nav-item:hover{
  background: rgba(255,255,255,.06);
  color:#fff;
}

.nav-item.active{
  background: var(--ink-soft);
  color:#fff;
}

.nav-item.active::before{
  content:"";
  position:absolute;
  left:0; top:8px; bottom:8px;
  width:3px;
  border-radius: 2px;
  background: var(--gold);
}

.nav-icon{
  display:flex;
  flex-shrink:0;
}

.nav-label{
  transition: opacity 160ms ease;
}

.sidebar.collapsed .nav-label{
  opacity:0;
  width:0;
  overflow:hidden;
}

.sidebar.collapsed .nav-item{
  justify-content:center;
  padding: 12px 0;
}

.sidebar-footer{
  padding: 14px 12px 18px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.logout-btn-full{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding: 10px 12px;
  border:none;
  background:transparent;
  color:#F3A9A3;
  cursor:pointer;
  border-radius:10px;
  font-family:'Inter', sans-serif;
  font-size:.88rem;
  font-weight:600;
  white-space:nowrap;
}

.logout-btn-full:hover{
  background: rgba(255,255,255,.06);
}

.sidebar.collapsed .logout-btn-full span{
  display:none;
}

.sidebar.collapsed .logout-btn-full{
  justify-content:center;
}

.version-tag{
  display:block;
  margin-top:10px;
  font-size:.7rem;
  color:#66708A;
  white-space:nowrap;
}

.sidebar.collapsed .version-tag{
  display:none;
}

/* ---------- MAIN ---------- */
.main{
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0;
}

.topbar{
  display:flex;
  align-items:center;
  gap:16px;
  padding: 16px 32px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.menu-toggle{
  display:none;
  border:none;
  background:transparent;
  color: var(--text);
  cursor:pointer;
  padding:6px;
  border-radius:8px;
}

.breadcrumb{
  flex:1;
  display:flex;
  align-items:baseline;
  gap:12px;
  min-width:0;
}

.page-title{
  font-family:'Fraunces', serif;
  font-size:1.3rem;
  font-weight:600;
  margin:0;
  white-space:nowrap;
}

.crumb-path{
  font-size:.8rem;
  color: var(--text-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.topbar-user{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}

.avatar{
  width:36px;
  height:36px;
  border-radius:50%;
  background: var(--gold);
  color: var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:.95rem;
  flex-shrink:0;
}

.topbar-user .user-info{
  display:flex;
  flex-direction:column;
  line-height:1.25;
}

.topbar-user .user-name{
  font-size:.86rem;
  font-weight:600;
  color: var(--text);
}

.topbar-user .user-role{
  font-size:.72rem;
  color: var(--text-muted);
}

.content{
  padding: 32px 36px 60px;
}

.view{
  display:none;
}

.view.active{
  display:block;
  animation: fadeIn 240ms ease;
}

@keyframes fadeIn{
  from{ opacity:0; transform: translateY(4px); }
  to{ opacity:1; transform: translateY(0); }
}

.eyebrow{
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--gold);
  font-weight:600;
  margin-bottom:6px;
}

.view-title{
  font-family:'Fraunces', serif;
  font-size:1.5rem;
  font-weight:600;
  margin: 0;
}

.view-text{
  color: var(--text-muted);
  font-size:.95rem;
  line-height:1.6;
  max-width: 60ch;
  margin-bottom: 28px;
}

/* ---------- TARJETAS DE INICIO ---------- */
.card-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:18px;
}

.card{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 20px;
  position:relative;
}

.card-num{
  font-family:'Fraunces', serif;
  font-size:.8rem;
  color: var(--gold);
  font-weight:600;
}

.card h3{
  font-size:1rem;
  margin: 10px 0 6px;
}

.card p{
  font-size:1.6rem;
  font-family:'Fraunces', serif;
  color: var(--text);
  margin:0;
  font-weight:600;
}

/* ---------- SECTION CARD (contenedor blanco) ---------- */
.section-card{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 28px 8px;
}

.section-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap:wrap;
}

/* ---------- BOTONES ---------- */
.btn-primary{
  background: var(--ink);
  color:#fff;
  border:none;
  padding: 11px 20px;
  border-radius: 8px;
  font-size:.88rem;
  font-weight:600;
  cursor:pointer;
  transition: background 160ms ease;
  white-space:nowrap;
}

.btn-primary:hover{
  background: var(--ink-soft);
}

.btn-primary:disabled{
  opacity:.6;
  cursor:not-allowed;
}

.btn-secondary{
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--line);
  padding: 10px 18px;
  border-radius: 8px;
  font-size:.88rem;
  font-weight:600;
  cursor:pointer;
}

.btn-secondary:hover{
  border-color: var(--text-muted);
  color: var(--text);
}

.btn-full{ width:100%; text-align:center; }

/* ---------- FORMULARIOS DESPLEGABLES ---------- */
.entity-form{
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px;
  margin-bottom: 22px;
}

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

.form-row-wide{
  grid-column: 1 / -1;
}

.form-row{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.form-row label{
  font-size:.8rem;
  font-weight:600;
  color: var(--text);
}

.optional{
  color: var(--text-muted);
  font-weight:400;
}

.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="password"],
.form-row input[type="date"],
.form-row select{
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: 'Inter', sans-serif;
  font-size:.9rem;
  background: var(--panel);
  color: var(--text);
}

.form-row input:focus,
.form-row select:focus{
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.entity-form-footer{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top: 18px;
}

.form-msg{
  margin:0;
  font-size:.85rem;
}

.form-msg.error{ color: var(--red); }
.form-msg.success{ color: var(--green); }

/* ---------- DROPZONE ---------- */
.dropzone{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-align:center;
  border: 1.5px dashed var(--line);
  border-radius: 10px;
  padding: 20px 18px;
  background: var(--panel);
  cursor:pointer;
  transition: border-color 160ms ease, background 160ms ease;
}

.dropzone:hover,
.dropzone.dragover{
  border-color: var(--gold);
  background: var(--gold-soft);
}

.dropzone.has-file{
  border-style: solid;
  border-color: var(--ink-soft);
}

.dropzone-text{
  font-size:.86rem;
  font-weight:600;
  color: var(--text);
}

.dropzone-hint{
  font-size:.75rem;
  color: var(--text-muted);
}

/* ---------- TABLAS DE DATOS ---------- */
.table-wrap{
  overflow-x:auto;
  margin: 0 -28px;
  padding: 0 28px;
}

.data-table{
  width:100%;
  border-collapse: collapse;
  font-size:.86rem;
}

.data-table th{
  text-align:left;
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color: var(--text-muted);
  font-weight:600;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  white-space:nowrap;
}

.data-table td{
  padding: 14px;
  border-bottom: 1px solid var(--line);
  vertical-align:middle;
  white-space:nowrap;
}

.data-table tbody tr:hover{
  background: var(--bg);
}

.data-table .cell-strong{
  font-weight:600;
  color: var(--text);
}

.data-table .cell-muted{
  color: var(--text-muted);
}

/* ---------- STATUS PILLS ---------- */
.pill{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:.76rem;
  font-weight:600;
  padding: 4px 10px;
  border-radius:999px;
  white-space:nowrap;
}

.pill::before{
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background: currentColor;
}

.pill.green{ background: var(--green-soft); color: var(--green); }
.pill.red{ background: var(--red-soft); color: var(--red); }
.pill.gray{ background: #EEF0F2; color: var(--text-muted); }

.role-badge{
  display:inline-block;
  font-size:.76rem;
  font-weight:600;
  padding: 3px 9px;
  border-radius:999px;
  text-transform:capitalize;
}

.role-badge.administrador{ background: #FBEFD9; color: #8A6416; }
.role-badge.usuario{ background: #E4E9F5; color: var(--ink); }
.role-badge.proveedor{ background: #E4F1E8; color: #1E7A46; }

/* ---------- ACCIONES DE TABLA ---------- */
.action-icons{
  display:flex;
  gap:6px;
}

.icon-btn{
  width:30px;
  height:30px;
  border-radius:8px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text-muted);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.icon-btn:hover{
  border-color: var(--ink);
  color: var(--ink);
}

.icon-btn.danger:hover{
  border-color: var(--red);
  color: var(--red);
}

.icon-btn.active-toggle.is-inactive{
  color: var(--red);
  border-color: var(--red-soft);
}

.text-muted{
  color: var(--text-muted);
  font-size:.9rem;
  white-space:normal;
}

/* ---------- LOGIN ---------- */
.login-body{
  background: var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
}

.login-wrap{
  width:100%;
  max-width: 380px;
  padding: 20px;
}

.login-card{
  background: var(--panel);
  border-radius: var(--radius);
  padding: 40px 32px;
  text-align:center;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
}

.login-seal{
  color: var(--gold);
  display:flex;
  justify-content:center;
  margin-bottom: 12px;
}

.login-title{
  font-family:'Fraunces', serif;
  font-size:1.5rem;
  font-weight:600;
  margin:0 0 4px;
}

.login-sub{
  color: var(--text-muted);
  font-size:.88rem;
  margin: 0 0 24px;
}

.login-form{
  display:flex;
  flex-direction:column;
  gap:16px;
  text-align:left;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 780px){
  .sidebar{
    position: fixed;
    left:0; top:0; bottom:0;
    z-index: 40;
    width: var(--sidebar-w);
    transform: translateX(-100%);
  }
  .sidebar.mobile-open{
    transform: translateX(0);
  }
  .sidebar.collapsed{
    width: var(--sidebar-w);
  }
  .menu-toggle{
    display:flex;
  }
  .content{
    padding: 22px 18px 48px;
  }
  .topbar{
    padding: 14px 18px;
  }
  .section-card{
    padding: 20px 18px 8px;
  }
  .table-wrap{
    margin: 0 -18px;
    padding: 0 18px;
  }
  .topbar-user .user-info{
    display:none;
  }
}

button:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
}