/* portal.css - entrada y administración de Paul Dream Music DAW (paleta del logo). */
:root {
  --fondo: #181714;
  --fondo-2: #211f1b;
  --fondo-3: #2b2823;
  --linea: #3a362f;
  --crema: #fcffba;
  --texto: #ebe9d6;
  --tenue: #a29f8c;
  --ac-1: #ff9d08;
  --ac-2: #fbb633;
  --ac-3: #f5ec8a;
  --degradado: linear-gradient(135deg, var(--ac-1), var(--ac-2) 55%, var(--ac-3));
  --ok: #8fd18a;
  --error: #ff7a6b;
  --radio: 8px;
  --tipo: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.entrada *, .admin * { box-sizing: border-box; }
.entrada, .admin { margin: 0; min-height: 100vh; background: var(--fondo); color: var(--texto); font: 15px/1.5 var(--tipo); }
.entrada a, .admin a { color: var(--ac-2); }
.entrada [hidden], .admin [hidden], #usuario-daw[hidden] { display: none !important; }
.entrada :focus-visible, .admin :focus-visible, #usuario-daw :focus-visible { outline: 2px solid var(--ac-2); outline-offset: 2px; }
.entrada h1, .entrada h2, .admin h1, .admin h2 { color: var(--crema); font-weight: 600; margin: 0; }
.tenue { color: var(--tenue); }
.espacio { flex: 1; }

/* Controles */
.entrada label, .admin label { display: block; margin-bottom: 14px; color: var(--tenue); font-size: 13px; }
.entrada input, .admin input { display: block; width: 100%; margin-top: 5px; padding: 10px 12px; color: var(--crema); background: var(--fondo);
  border: 1px solid var(--linea); border-radius: var(--radio); font: inherit; }
.entrada input:focus, .admin input:focus { border-color: var(--ac-2); }
.btn { display: inline-block; padding: 10px 18px; color: var(--crema); background: var(--fondo-3); border: 1px solid var(--linea);
  border-radius: var(--radio); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.admin a.btn { color: var(--crema); }
.btn:hover:not(:disabled) { border-color: var(--ac-2); }
.btn:disabled { opacity: .55; cursor: progress; }
.btn-primario, .admin .btn-primario { width: 100%; color: #1b1407; background: var(--degradado); border-color: transparent; }
.btn-primario:hover:not(:disabled) { filter: brightness(1.08); }
.btn-s { width: auto; padding: 5px 10px; font-size: 13px; }
.btn-peligro { color: var(--error); }
.msg { margin: 0 0 14px; padding: 10px 12px; border-radius: var(--radio); border: 1px solid var(--linea); background: var(--fondo-3); }
.msg-ok { color: var(--ok); border-color: #3d5a3a; }
.msg-error { color: var(--error); border-color: #6a3a33; }

/* Entrada */
body.entrada { display: flex; align-items: center; justify-content: center; padding: 24px 16px;
  background: radial-gradient(ellipse at 50% 0, #2a251b 0, var(--fondo) 60%); }
.tarjeta { width: 100%; max-width: 420px; text-align: center; }
.logo-grande { display: block; width: min(160px, 50%); height: auto; margin: 0 auto 8px; border-radius: var(--radio); }
.nombre { font-size: 20px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 22px; }
.tarjeta .msg { text-align: left; }
.tarjeta section { text-align: left; background: var(--fondo-2); border: 1px solid var(--linea); border-radius: var(--radio); padding: 22px; }
.tarjeta section h2 { margin-bottom: 14px; font-size: 18px; }
.tabs { display: flex; justify-content: center; gap: 4px; margin-bottom: 14px; flex-wrap: wrap; }
.tabs button { padding: 7px 12px; color: var(--tenue); background: none; border: 0; border-bottom: 2px solid transparent;
  font: inherit; font-size: 13px; cursor: pointer; }
.tabs button[aria-selected="true"] { color: var(--crema); border-bottom-color: var(--ac-1); }
.tabs button:hover { color: var(--crema); }
.logo-enlace { display: block; width: fit-content; margin: 0 auto; }
.pasos { margin: 0 0 18px; padding-left: 22px; line-height: 1.6; }
.pasos li { margin-bottom: 8px; }
.entrada a.btn { color: var(--crema); text-decoration: none; }
.entrada a.btn-primario { color: #1b1407; }
.btn-bloque { display: block; width: 100%; margin-top: 10px; text-align: center; }
.nota { margin: 14px 0 0; font-size: 13px; }
.legal-enlaces { margin: 18px 0 0; font-size: 12px; color: var(--tenue); }
.legal-enlaces a { color: var(--tenue); }
body.legal { margin: 0; min-height: 100vh; background: var(--fondo); color: var(--texto); font: 15px/1.65 var(--tipo); }
.legal-pagina { max-width: 760px; margin: 0 auto; padding: 28px 20px 60px; }
.legal-pagina h1 { color: var(--crema); font-size: 28px; margin: 18px 0 4px; }
.legal-pagina h2 { color: var(--crema); font-size: 18px; margin: 26px 0 6px; }
.legal-pagina a { color: var(--ac-2); }
.legal-pagina code { background: var(--fondo-3); padding: 1px 5px; border-radius: 4px; }
.legal-logo { display: inline-block; }
.legal-logo img { display: block; border-radius: 8px; height: auto; }
.legal-idiomas { margin: 14px 0 0; color: var(--tenue); }
.legal-sep { border: 0; border-top: 1px solid var(--linea); margin: 44px 0; }
.legal-pie { margin-top: 40px; }
.enlace-texto { padding: 0; color: var(--ac-2); background: none; border: 0; font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }

/* Admin */
.cabecera { display: flex; align-items: center; gap: 12px; padding: 10px 20px; background: var(--fondo-2); border-bottom: 1px solid var(--linea); flex-wrap: wrap; }
.cabecera h1 { font-size: 18px; }
.logo-peq { height: 44px; width: auto; border-radius: 4px; }
.contenido { max-width: 1100px; margin: 0 auto; padding: 24px 20px 48px; display: grid; gap: 24px; }
.panel { background: var(--fondo-2); border: 1px solid var(--linea); border-radius: var(--radio); padding: 20px; }
.panel h2 { font-size: 17px; margin-bottom: 14px; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; align-items: end; }
.fila-botones { margin-bottom: 14px; }
.tabla-caja { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th, .tabla td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla th { color: var(--tenue); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.panel-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.panel-cab h2 { margin-bottom: 0; }
.tabla td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla tr.mayor-consumo td { background: rgba(255, 170, 60, .10); }
.tabla tr.mayor-consumo td.num { color: var(--ac-2); font-weight: 600; }
.acciones { display: flex; gap: 6px; flex-wrap: wrap; }
.estado { padding: 2px 8px; border-radius: 99px; font-size: 12px; border: 1px solid var(--linea); }
.estado-approved { color: var(--ok); border-color: #3d5a3a; }
.estado-pending { color: var(--ac-2); border-color: #6a5320; }
.estado-blocked { color: var(--error); border-color: #6a3a33; }

@media (max-width: 720px) {
  .tabla thead { display: none; }
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }
  .tabla tr { padding: 8px 0; border-bottom: 1px solid var(--linea); }
  .tabla td { border: 0; padding: 3px 4px; }
  .tabla td[data-etq]::before { content: attr(data-etq) ": "; color: var(--tenue); }
}

/* Gestión del admin: pestañas y botones cómodos (>= 36 px). */
.admin .btn { min-height: 36px; }
.admin .btn-grande { width: auto; min-height: 44px; padding: 10px 22px; font-size: 16px; text-decoration: none; display: inline-flex; align-items: center; }
.admin a.btn-primario { color: #1b1407; }
.pestanas { display: flex; gap: 8px; flex-wrap: wrap; max-width: 1100px; margin: 0 auto; padding: 16px 20px 0; }
.pestana { min-height: 40px; padding: 8px 18px; color: var(--tenue); background: var(--fondo-2); border: 1px solid var(--linea); border-radius: var(--radio); font: inherit; cursor: pointer; }
.pestana:hover { color: var(--crema); }
.pestana[aria-selected="true"] { color: var(--crema); border-color: var(--ac-2); box-shadow: 0 0 8px rgba(251, 182, 51, .35); }
.contenido [role="tabpanel"] { display: grid; gap: 18px; }
.contenido [role="tabpanel"][hidden] { display: none; }
.admin .campo-demo { min-width: 12em; margin-top: 0; padding: 6px 8px; }