:root{
    /* Paleta SIACOMEX (aprox. navy + cyan) */
    --bg:#f5f7fb;
    --panel:#ffffff;
    --text:#0f172a;
    --muted:#64748b;
    --border:#e5e7eb;
  
    --navy:#071a33;
    --navy2:#0b2a4a;
    --cyan:#00b7d6;
    --cyan2:#18d1ee;
  
    /* Estados */
    --danger:#dc3545;
    --danger2:#c82333;
    --success:#00b7d6;     /* alineado al cyan */
    --success2:#18d1ee;
  
    /* Sidebar */
    --sidebar: var(--navy);
  
    --shadow:0 2px 10px rgba(0,0,0,.08);
    --shadow2:0 8px 24px rgba(0,0,0,.14);
    --focus:0 0 0 3px rgba(0,183,214,.25);
  
    --r:12px;
    --r2:10px;
  
    /* Transiciones mínimas */
    --t-fast: 140ms;
    --t: 220ms;
    --ease: cubic-bezier(.2,.8,.2,1);
  }
  
  @media (prefers-reduced-motion: reduce){
    *{ transition:none !important; animation:none !important; scroll-behavior:auto !important; }
  }
  
  *{margin:0;padding:0;box-sizing:border-box;}
  body{font-family:Arial,sans-serif;background:var(--bg);color:var(--text);}
  
  /* HEADER */
  .header{
    background:linear-gradient(135deg,var(--navy) 0%, var(--navy2) 60%, var(--cyan) 160%);
    color:#fff;
    padding:18px 20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
  }
  .header-title{font-size:28px;font-weight:900;letter-spacing:2px;user-select:none;}
  .user-info{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end;}
  .user-name{font-size:13px;opacity:.95;}
  
  .badge{
    padding:4px 8px;border-radius:8px;font-size:11px;font-weight:900;letter-spacing:.3px;user-select:none;
    transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  }
  .badge.admin{background:#ffc107;color:#2d2d2d;}
  .badge.guest{background:rgba(0,183,214,.95);color:#fff;}
  
  /* botones de header */
  .btn{
    border:1px solid rgba(255,255,255,.85);
    background:rgba(255,255,255,.14);
    color:#fff;
    padding:8px 14px;
    border-radius:10px;
    cursor:pointer;
    font-size:13px;
    transition:
      transform var(--t-fast) var(--ease),
      background var(--t-fast) var(--ease),
      opacity var(--t-fast) var(--ease),
      box-shadow var(--t-fast) var(--ease);
  }
  .btn:hover{background:rgba(255,255,255,.22);}
  .btn:active{transform:translateY(1px);}
  .btn:focus{outline:none;box-shadow:var(--focus);}
  
  /* LAYOUT */
  .container{display:flex;min-height:calc(100vh - 72px);}
  
  /* SIDEBAR */
  .sidebar{
    width:280px;
    background:var(--sidebar);
    padding:18px;
    color:#fff;
    overflow-y:auto;
  }
  .sidebar-title{
    font-size:16px;
    font-weight:900;
    margin-bottom:16px;
    padding-bottom:10px;
    border-bottom:2px solid rgba(0,183,214,.35);
  }
  
  .menu-item{
    padding:12px 14px;
    margin-bottom:8px;
    border-radius:10px;
    cursor:pointer;
    font-size:14px;
    user-select:none;
  
    transition:
      background var(--t-fast) var(--ease),
      transform var(--t-fast) var(--ease),
      color var(--t-fast) var(--ease);
  }
  .menu-item:hover{
    background:rgba(0,183,214,.12);
    transform:translateX(2px);
  }
  .menu-item[aria-current="true"]{
    background:rgba(0,183,214,.20);
    font-weight:900;
    transform:translateX(2px);
  }
  
  /* CONTENT */
  .content{
    flex:1;
    padding:28px 36px;
    background:#f9fafb;
    overflow-y:auto;
  }
  
  .welcome{
    background:#e6fbff;
    border-left:4px solid var(--cyan);
    padding:14px 16px;
    border-radius:var(--r);
    margin-bottom:18px;
    transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
  }
  .welcome h3{color:#046a7a;margin-bottom:6px;font-size:18px;}
  .welcome p{color:#475569;font-size:14px;line-height:1.6;}
  
  .content-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0;}
  .content-title{font-size:22px;}
  .toolbar{display:flex;gap:10px;align-items:center;}
  
  /* BOTÓN AGREGAR */
  .btn-add{
    background:var(--success);
    border:none;
    padding:10px 14px;
    border-radius:12px;
    cursor:pointer;
    color:#fff;
    font-size:14px;
    font-weight:900;
    display:none;
  
    transition:
      transform var(--t-fast) var(--ease),
      background var(--t-fast) var(--ease),
      box-shadow var(--t-fast) var(--ease),
      opacity var(--t-fast) var(--ease);
  }
  .btn-add:hover{background:var(--success2);}
  .btn-add:active{transform:translateY(1px);}
  .btn-add:focus{outline:none;box-shadow:var(--focus);}
  
  /* SEARCH */
  .search-box{margin-bottom:18px;}
  .search-input{
    width:100%;
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:14px;
    font-size:14px;
    background:#fff;
    transition: box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  }
  .search-input:focus{
    outline:none;
    box-shadow:var(--focus);
    border-color:rgba(0,183,214,.6);
  }
  
  /* CARDS */
  .cards{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
    gap:18px;
    transition: opacity var(--t) var(--ease);
  }
  
  .card{
    background:var(--panel);
    border-radius:var(--r);
    padding:16px;
    box-shadow:var(--shadow);
    border:1px solid rgba(0,0,0,.03);
    transition:
      transform var(--t) var(--ease),
      box-shadow var(--t) var(--ease),
      opacity var(--t) var(--ease);
  }
  .card:hover{transform:translateY(-3px);box-shadow:var(--shadow2);}
  .card-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    padding-bottom:10px;
    border-bottom:1px solid var(--border);
    margin-bottom:12px;
  }
  .card-category{font-size:11px;color:var(--muted);}
  
  .card-actions{display:flex;gap:8px;}
  .icon-btn{
    width:30px;
    height:30px;
    border:none;
    border-radius:10px;
    cursor:pointer;
    background:#f1f5f9;
    display:flex;
    align-items:center;
    justify-content:center;
  
    transition:
      transform var(--t-fast) var(--ease),
      background var(--t-fast) var(--ease),
      box-shadow var(--t-fast) var(--ease);
  }
  .icon-btn:hover{background:#e2e8f0;}
  .icon-btn:active{transform:translateY(1px);}
  .icon-btn:focus{outline:none;box-shadow:var(--focus);}
  
  .preview{
    height:140px;
    border-radius:14px;
    background:linear-gradient(135deg,#f0f0f0,#e0e0e0);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:46px;
    color:#94a3b8;
    margin-bottom:12px;
    user-select:none;
  }
  
  .doc-code{font-size:14px;font-weight:900;margin-bottom:6px;}
  .doc-title{font-size:13px;font-weight:800;color:#111827;margin-bottom:8px;}
  .doc-desc{font-size:12px;color:var(--muted);line-height:1.5;min-height:38px;}
  
  /* BOTÓN VER DOCUMENTO (cyan corporativo) */
  .card-button{
    margin-top:12px;
    width:100%;
    padding:10px 12px;
    border-radius:12px;
    border:none;
    background:var(--cyan);
    color:#fff;
    cursor:pointer;
    font-weight:900;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
  
    transition:
      transform var(--t-fast) var(--ease),
      background var(--t-fast) var(--ease),
      box-shadow var(--t-fast) var(--ease),
      opacity var(--t-fast) var(--ease);
  }
  .card-button:hover{background:var(--cyan2);}
  .card-button:active{transform:translateY(1px);}
  .card-button::after{content:"➜";font-size:16px;}
  .card-button:focus{outline:none;box-shadow:var(--focus);}
  
  .empty{
    text-align:center;
    color:#94a3b8;
    padding:40px 10px;
    background:#fff;
    border:1px dashed var(--border);
    border-radius:16px;
  }
  
  /* MODALES (fade + slide suave) */
  .modal{
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px;
    z-index:1000;
  
    background:rgba(0,0,0,.0);
    opacity:0;
    pointer-events:none;
  
    transition: opacity var(--t) var(--ease), background var(--t) var(--ease);
  }
  
  .modal[aria-hidden="false"]{
    opacity:1;
    pointer-events:auto;
    background:rgba(0,0,0,.65);
  }
  
  .modal-content{
    width:100%;
    max-width:560px;
    max-height:92vh;
    overflow:auto;
    background:#fff;
    border-radius:16px;
    padding:18px;
    box-shadow:var(--shadow2);
  
    transform: translateY(10px) scale(.99);
    opacity:.95;
  
    transition: transform var(--t) var(--ease), opacity var(--t) var(--ease);
  }
  
  .modal[aria-hidden="false"] .modal-content{
    transform: translateY(0) scale(1);
    opacity:1;
  }
  
  .modal-content.large{max-width:92%;max-height:95vh;}
  
  .modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}
  .modal-title{font-size:18px;font-weight:900;}
  
  .btn-close{
    border:none;
    background:transparent;
    font-size:26px;
    cursor:pointer;
    color:#94a3b8;
    padding:4px 8px;
    border-radius:10px;
  
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  }
  .btn-close:hover{color:#334155;background:#f1f5f9;}
  .btn-close:active{transform:translateY(1px);}
  
  .form-group{margin-bottom:14px;}
  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  label{display:block;margin-bottom:6px;font-weight:900;font-size:13px;color:#334155;}
  
  .input,.select,.textarea{
    width:100%;
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius:12px;
    font-size:14px;
    background:#fff;
    transition: box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  }
  .textarea{min-height:96px;resize:vertical;}
  
  .input:focus,.select:focus,.textarea:focus{
    outline:none;
    box-shadow:var(--focus);
    border-color:rgba(0,183,214,.6);
  }
  
  .file{
    width:100%;
    padding:12px;
    border:2px dashed var(--border);
    border-radius:14px;
    background:#fafafa;
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  }
  .file:focus{outline:none;box-shadow:var(--focus);border-color:rgba(0,183,214,.6);}
  
  /* BOTÓN SUBMIT (cyan) */
  .btn-submit{
    width:100%;
    padding:12px 14px;
    border:none;
    border-radius:14px;
    background:var(--cyan);
    color:#fff;
    font-weight:900;
    cursor:pointer;
  
    transition:
      transform var(--t-fast) var(--ease),
      background var(--t-fast) var(--ease),
      box-shadow var(--t-fast) var(--ease);
  }
  .btn-submit:hover{background:var(--cyan2);}
  .btn-submit:active{transform:translateY(1px);}
  
  .hint{margin-top:12px;padding:12px;background:#f8fafc;border-radius:14px;font-size:12px;color:#475569;}
  .mini-help{margin-top:8px;font-size:12px;color:var(--muted);}
  
  /* VISOR PDF */
  .viewer-toolbar{
    display:flex;
    align-items:center;
    gap:10px;
    margin:8px 0 12px 0;
    background:#f8fafc;
    border:1px solid var(--border);
    border-radius:14px;
    padding:10px 12px;
  }
  
  .viewer-btn{
    border:1px solid var(--border);
    background:#fff;
    border-radius:12px;
    padding:8px 10px;
    cursor:pointer;
    font-weight:900;
  
    transition:
      transform var(--t-fast) var(--ease),
      background var(--t-fast) var(--ease),
      box-shadow var(--t-fast) var(--ease);
  }
  .viewer-btn:hover{background:#f1f5f9;}
  .viewer-btn:active{transform:translateY(1px);}
  .viewer-btn:focus{outline:none;box-shadow:var(--focus);}
  
  .viewer-page{font-size:13px;color:#334155;font-weight:900;}
  .viewer-spacer{flex:1;}
  
  .viewer{
    width: 100%;
    height: 76vh;
    border-radius: 16px;
    background: #0b1220;
    position: relative;
    overflow: auto;    /* scroll para zoom real */
    display: block;
    padding: 18px;
    transition: background var(--t-fast) var(--ease);
  }
  
  #pdfCanvas{
    display: block;
    max-width: none;
    max-height: none;
    margin: 0 auto;
  }
  
  /* Overlay con transición */
  .overlay{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,.70);
    color:#fff;
    font-weight:900;
    font-size:16px;
    opacity:0;
    pointer-events:none;
    transition: opacity var(--t-fast) var(--ease);
    z-index:3;
  }
  .overlay.show{opacity:1;}
  
  .watermark{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:rgba(0,183,214,.14);
    font-weight:900;
    font-size:28px;
    letter-spacing:1px;
    transform:rotate(-20deg);
    z-index:2;
    pointer-events:none;
    user-select:none;
    text-align:center;
    padding:20px;
  }
  
  .viewer-note{margin-top:10px;color:#64748b;font-size:12px;}
  
  /* Disuasión impresión */
  @media print { body{ display:none; } }
  
  @media (max-width:768px){
    .container{flex-direction:column;}
    .sidebar{width:100%;}
    .content{padding:18px;}
    .form-grid{grid-template-columns:1fr;}
  }