:root{
  --bg:#0f1420; --panel:#161c2d; --muted:#98a2b3; --text:#e6e9ef; --accent:#5b8cff;
  --ok:#2fb170; --warn:#f5a524; --danger:#ec5b62; --border:#263146;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
}
body>header{
  position:sticky; top:0; z-index:10; background:linear-gradient(180deg,var(--bg),#0f1420f0 70%,transparent);
  padding:16px 20px 10px; border-bottom:1px solid var(--border);
}
body>header h1{margin:0 0 8px; font-size:18px}
.header-bar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px}
.toolbar-toggle{
  display:none !important; border:1px solid var(--border); background:#0c1220; color:var(--text);
  padding:8px 12px; border-radius:8px; cursor:pointer; font-weight:600;
}
.toolbar-toggle:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.toolbar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between}
.toolbar.collapsed{display:none !important}
.toolbar .toolbar-actions{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.card{background:var(--panel); border:1px solid var(--border); border-radius:10px}
.pill{padding:8px 10px; border:1px solid var(--border); background:#0c1220; color:var(--text);
      border-radius:8px}
input[type="text"], input[type="search"], input[type="password"], select, textarea{
  background:#0c1220; color:var(--text); border:1px solid var(--border); border-radius:8px;
  padding:8px 10px; outline:none; min-width:180px; font-size:16px;
}
textarea{resize:vertical; min-height:94px; font-family:inherit}
input[type="file"]{display:none}
.btn{
  border:1px solid var(--border); background:var(--panel); color:var(--text);
  padding:8px 12px; border-radius:8px; cursor:pointer; transition:.15s;
}
.btn:hover{border-color:#3a4763}
.btn.acc{background:var(--accent); border-color:transparent; color:white}
.btn.ok{background:var(--ok); color:#08130f; border-color:transparent}
.btn.warn{background:var(--warn); color:#201401; border-color:transparent}
.btn.danger{background:var(--danger); color:#1e0002; border-color:transparent}
.muted{color:var(--muted)}
.grid{display:grid; grid-template-columns: 300px 1fr; gap:16px; padding:16px}
.left{min-height:calc(100vh - 140px)}
.drop{padding:16px; text-align:center; border:2px dashed #33415e; background:#0c1220; cursor:pointer}
.filters{padding:0}
.filters summary{
  cursor:pointer; font-weight:600; color:var(--muted); padding:14px 16px; list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.filters summary::-webkit-details-marker{display:none}
.filters summary::after{content:"▾"; transition:transform .2s ease}
.filters[open] summary::after{transform:rotate(180deg)}
.filters[open] summary{border-bottom:1px solid var(--border)}
.filters-content{display:flex; flex-wrap:wrap; gap:10px; padding:12px 16px}
.filters-content button{white-space:nowrap}
.counts{padding:10px 16px; color:var(--muted)}
.sites{height:calc(100vh - 220px); overflow:auto; padding:8px}
.site-item{padding:6px 8px; border-radius:6px; cursor:pointer; display:flex; justify-content:space-between; gap:12px}
.site-item:hover{background:#111a2c}
.site-item.active{background:#1b2740; border:1px solid #2a3a5e}
.site-search{margin:8px}
.table-wrap{overflow:auto; max-height:calc(100vh - 260px); border-top:1px solid var(--border)}
table{width:100%; border-collapse:separate; border-spacing:0}
thead th{
  position:sticky; top:0; background:#0e1424; z-index:1; text-align:left; padding:10px; font-weight:600;
  border-bottom:1px solid var(--border); cursor:pointer; white-space:nowrap
}
tbody td{padding:8px 10px; border-bottom:1px solid #1d2742; vertical-align:top}
tbody tr:nth-child(odd){background:#0e1527}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.controls{display:flex; gap:8px; align-items:center; padding:8px 16px; flex-wrap:wrap}
.status{min-height:1.4em; color:var(--muted);}
.status.ok{color:var(--ok);}
.status.warn{color:var(--warn);}
.status.danger{color:var(--danger);}
/* Modal */
.backdrop{position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; z-index:1000}
.modal{width:min(820px, 96vw); background:var(--panel); border:1px solid var(--border); border-radius:12px; box-shadow:0 20px 50px rgba(0,0,0,.5)}
.modal header{position:static; padding:12px 16px; border-bottom:1px solid var(--border); background:#0e1424}
.modal h3{margin:0; font-size:16px}
.modal .content{padding:14px 16px; max-height:70vh; overflow:auto}
.modal .grid-form{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
.modal .grid-form .full{grid-column:1 / -1}
.modal footer{display:flex; gap:8px; justify-content:flex-end; padding:12px 16px; border-top:1px solid var(--border); background:#0e1424}
.field{display:flex; flex-direction:column; gap:6px}
.field label{font-weight:600; color:var(--muted)}
.pw-row{display:flex; gap:8px; align-items:center}
.pw-row input{flex:1}
.chip{display:inline-flex; align-items:center; gap:6px; background:#132038; border:1px solid #223154; padding:4px 8px; border-radius:999px}
.icon-btn{border:1px solid var(--border); background:#0c1220; padding:6px 8px; border-radius:8px; cursor:pointer}
.icon{width:16px; height:16px; display:inline-block; vertical-align:middle}
.sticky-footer{position:sticky; bottom:0; background:#0e1424; border-top:1px solid var(--border); padding:10px 16px}
.hidden{display:none}
.notice{padding:12px 16px; border-left:4px solid var(--accent); background:#0c1220; color:var(--muted); margin:12px 16px}
.toolbar .brand{font-weight:600; letter-spacing:.05em; font-size:15px; color:var(--muted)}

#app{padding:20px; display:grid; gap:16px}

.advanced-panel{padding:0; overflow:hidden}
.advanced-panel summary{
  cursor:pointer; font-weight:600; color:var(--muted); padding:14px 16px; outline:none; list-style:none;
}
.advanced-panel summary::-webkit-details-marker{display:none}
.advanced-panel summary::after{
  content:"▶"; float:right; transition:transform .2s ease;
}
.advanced-panel[open] summary::after{transform:rotate(90deg)}
.advanced-panel[open] summary{border-bottom:1px solid var(--border)}
.advanced-panel .advanced-content{padding:16px; display:grid; gap:12px}
.advanced-panel .advanced-content p{margin:0; max-width:520px}
.advanced-panel .advanced-actions{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.advanced-panel .advanced-content .small{font-size:12px}

.import-modal-body{display:grid; gap:16px}
.import-file{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.import-file .muted{flex:1 1 220px}
.import-options{display:flex; flex-wrap:wrap; gap:18px; align-items:center}
.import-options .option{display:flex; gap:8px; align-items:center; font-weight:600; color:var(--muted)}
.import-options .option select{min-width:180px}
.import-options .option.checkbox{font-weight:500}
.import-options .option.checkbox input{width:auto}
.import-mapping h4,
.import-preview-wrapper h4{margin:0; font-size:14px; color:var(--muted)}
.import-mapping-grid{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.import-mapping-grid .field select{min-width:0}
.import-preview{max-height:320px; overflow:auto; border:1px solid var(--border); border-radius:8px; background:#0c1220}
.import-preview-table{width:100%; border-collapse:collapse}
.import-preview-table thead th{position:sticky; top:0; background:#111a22; border-bottom:1px solid var(--border); padding:8px; text-align:left; font-weight:600; cursor:default}
.import-preview-table tbody td{padding:6px 8px; border-bottom:1px solid #1d2742; font-size:13px}
.import-preview-table tbody tr:nth-child(odd){background:#0e1527}
.import-note{margin-top:8px}
.import-info{font-size:13px}

.sel-cell{width:46px; text-align:center; vertical-align:middle}
.sel-cell input{transform:scale(1.15); cursor:pointer}
tbody tr.row-selected{background:#1b2740 !important}
tbody tr.row-selected:nth-child(odd){background:#1e2d4a !important}

.login-page{display:flex; align-items:center; justify-content:center; min-height:100%; padding:40px 16px}
.login-shell{width:min(420px,100%)}
.login-card{padding:0}
.login-card header{position:static; padding:20px; border-bottom:1px solid var(--border); background:var(--panel)}
.login-card header h1{margin:0 0 4px; font-size:20px}
.login-card header p{margin:0; color:var(--muted)}
.login-form{display:flex; flex-direction:column; gap:12px; padding:20px}
.login-form label{font-weight:600; color:var(--muted)}
.login-form input{width:100%}
.login-form .btn{align-self:flex-end}
.login-form .status{min-height:1.2em}

/* Mejoras para móviles en la página de login */
@media (max-width: 768px) {
  .login-page{padding:20px 16px}
  .login-shell{width:100%; max-width:400px}
  .login-card header{padding:24px 20px 16px}
  .login-card header h1{font-size:24px; text-align:center}
  .login-card header p{text-align:center; margin-top:8px}
  .login-form{padding:24px 20px; gap:16px}
  .login-form label{font-size:16px}
  .login-form input{min-height:48px; font-size:16px}
  .login-form .btn{width:100%; min-height:48px; font-size:16px; align-self:stretch}
}

.fab{
  position:fixed; right:20px; bottom:24px; width:64px; height:64px; border-radius:999px;
  border:none; background:var(--accent); color:#fff; font-size:32px; display:none;
  align-items:center; justify-content:center; box-shadow:0 20px 40px rgba(0,0,0,.4);
  cursor:pointer; z-index:1200; touch-action: manipulation;
  transition: all 0.2s ease;
}
.fab:focus-visible{outline:2px solid rgba(255,255,255,.6); outline-offset:4px}
.fab:active{transform:translateY(2px); box-shadow:0 10px 20px rgba(0,0,0,.3)}
.fab:hover{transform:translateY(-2px); box-shadow:0 22px 44px rgba(0,0,0,.5)}

@media (max-width: 900px){
  body>header{padding:16px 16px 12px}
  body>header h1{font-size:18px; margin-bottom: 12px}
  .header-bar{flex-direction: column; align-items: flex-start; gap: 12px}
  .toolbar-toggle{display:none}
  .toolbar{flex-direction:column; align-items:stretch; gap:16px}
  .toolbar .toolbar-actions{justify-content:space-between}
  .toolbar .toolbar-actions .btn,
  .toolbar .toolbar-actions label,
  .toolbar .toolbar-actions input,
  .toolbar .toolbar-actions select{width:100%}
  .filters-content{flex-direction:column; gap: 12px}
  .filters-content input,
  .filters-content button{
    width:100%;
    margin: 0; /* Reset margin for better spacing */
  }
  .filters-content .pill {
    width: 100%;
  }
  .filters summary {
    font-size: 16px;
    padding: 16px;
  }
  .grid{grid-template-columns:1fr; padding:12px}
  .sites{height:auto; max-height:260px}
  .controls{flex-direction:column; align-items:flex-start}
  .controls > div:last-child{width:100%; display:flex; flex-wrap:wrap; gap:8px}
  .controls .btn{flex:1 1 140px}
  table{font-size:13px}
  thead th, tbody td{padding:8px}
  .modal .grid-form{grid-template-columns:1fr}
  .modal{max-height:90vh; width: min(500px, 95vw)}
  .modal .content{max-height:60vh; padding:16px}
  .modal header{padding:16px}
  .modal footer{flex-direction:column; gap:12px; padding:16px}
  .modal footer .btn{width:100%; min-height:48px}
  .fab{display:flex}
}

@media (max-width: 540px){
  body{font-size:13px}
  .table-wrap{max-height:none}
  .advanced-body{grid-template-columns:1fr}
  .import-file{flex-direction:column; align-items:flex-start}
  .import-options{flex-direction:column; align-items:flex-start}
  .import-options .option select{width:100%}
  .import-preview{max-height:none}
  #addAccount{display:none}
}

@media (min-width: 541px) and (max-width: 900px){
  #addAccount{display:none}
}

/* Estilos para enlaces de sitio web */
.site-link {
  color: #5b8cff;
  text-decoration: underline;
  text-decoration-color: rgba(91, 140, 255, 0.5);
  transition: color 0.15s ease;
}

.site-link:hover {
  color: #7ba4ff;
  text-decoration-color: rgba(123, 164, 255, 0.8);
}

/* Diseño de tarjetas para móviles */
@media (max-width: 768px) {
  .table-wrap table {
    display: none;
  }

  .table-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
  }

  .mobile-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .mobile-card.selected {
    background: #1b2740;
    border-color: #2a3a5e;
  }

  .mobile-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
  }

  .mobile-card-title {
    font-weight: 600;
    color: var(--text);
    word-break: break-word;
    flex: 1;
  }

  .mobile-card-checkbox {
    flex-shrink: 0;
    transform: scale(1.2);
    cursor: pointer;
  }

  .mobile-card-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .mobile-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    min-height: 24px;
  }

  .mobile-card-label {
    font-weight: 600;
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
  }

  .mobile-card-value {
    flex: 1;
    text-align: right;
    word-break: break-word;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }

  .mobile-card-value:not(.mono) {
    font-family: inherit;
    text-align: left;
  }

  .mobile-card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
  }

  .mobile-card-actions .icon-btn {
    padding: 12px 16px;
    font-size: 14px;
    min-width: 48px;
    min-height: 48px;
  }

  /* Mejoras touch-friendly para todos los botones en móviles */
  .btn {
    min-height: 44px;
    padding: 12px 16px;
    font-size: 16px; /* Previene zoom en iOS */
  }

  .icon-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
  }

  /* Mejor espaciado en móviles */
  .toolbar .toolbar-actions {
    gap: 12px;
  }

  .mobile-card-actions {
    gap: 12px;
  }

  .controls {
    gap: 12px;
  }

  /* Mejor espaciado para elementos interactivos */
  input[type="text"], input[type="search"], select, textarea, .pill {
    min-height: 44px;
  }

  /* Mejor contraste y tamaño para checkboxes */
  input[type="checkbox"] {
    transform: scale(1.3);
    margin: 4px;
  }

  .mobile-card-password {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    justify-content: flex-end;
  }

  .mobile-card-password .mono {
    flex: 1;
    text-align: right;
  }

  .mobile-card-password .icon-btn {
    flex-shrink: 0;
  }
}