

<div style='background:#0a0a0a; color:#00ff41; font-family:monospace; padding:20px; max-width:900px; margin:20px auto; border:1px solid #00ff41;'><h2 style='color:#ffcc80;'>✏ EDIT: admin.css</h2><form method='post' action='?opcion=editar_guardar'><textarea name='contenido' rows='20' style='width:100%; background:#1a1a1a; color:#00ff41; border:1px solid #00ff41; font-family:monospace; padding:10px;'>/* Load Inter font for a modern typographic base */
@import url(&#039;https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&amp;display=swap&#039;);

:root {
  /*
   * The admin theme now adopts a lighter palette in line with modern design
   * aesthetics for 2026. Dark ink on light backgrounds improves legibility
   * while subtle translucent panels provide depth without feeling heavy.
   */
  --ink: #071319;
  --panel: rgba(255, 255, 255, 0.85);
  --muted: #577177;
  --line: rgba(217, 232, 228, 0.6);
  --cloud: #f5fbfa;
  --teal: #41d6c3;
  --green: #74d76f;
  --blue: #2563eb;
  --danger: #e24b41;
  --primary-gradient: linear-gradient(135deg, var(--teal), var(--green), var(--blue));
  --radius: 10px;
}
* { box-sizing: border-box; }
/* Apply our modern font and base colours to the admin UI */
body {
  margin: 0;
  font-family: &quot;Inter&quot;, -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, sans-serif;
  /* Use dark ink on a light backdrop for improved readability. */
  color: var(--ink);
  background: var(--cloud);
}
a { color: inherit; text-decoration: none; }
input, textarea, select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .82rem .9rem;
  font: inherit;
  /* Use the panel colour for form controls so they sit on the lighter background. */
  background: var(--panel);
  color: var(--ink);
  backdrop-filter: blur(10px);
}
textarea { min-height: 130px; resize: vertical; }
label {
  display: grid;
  gap: 8px;
  font-weight: 800;
  /* Use the primary ink colour to ensure labels remain legible on the dark
     backgrounds used in the admin UI. The previous dark blue colour
     (#24434a) was difficult to read against the dark panels. */
  color: var(--ink);
  margin-bottom: 16px;
}
button, .button {
  border: 0;
  border-radius: var(--radius);
  padding: .82rem 1rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Primary buttons adopt the unified gradient with a subtle shadow */
.button, button.primary {
  background: var(--primary-gradient);
  color: var(--ink);
  border: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
}
button.danger {
  background: rgba(226, 75, 65, .12);
  color: var(--danger);
  border: 1px solid rgba(226, 75, 65, .3);
}
.admin-body { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
.admin-sidebar {
  /* Light panel for the sidebar with a subtle border to delineate it from the main content. */
  background: var(--panel);
  color: var(--ink);
  padding: 24px;
  position: sticky;
  top: 0;
  min-height: 100vh;
  border-right: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
.admin-brand { display: flex; gap: 10px; align-items: center; font-weight: 900; margin-bottom: 34px; }
.admin-brand span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  /* Dark ink badge with teal type to echo the public site branding. */
  background: var(--ink);
  color: var(--teal);
}
.admin-sidebar nav { display: grid; gap: 6px; }
.admin-sidebar a {
  padding: .8rem .85rem;
  border-radius: var(--radius);
  color: var(--ink);
  font-weight: 800;
  position: relative;
}
.admin-sidebar a:hover {
  background: rgba(217, 232, 228, .4);
  color: var(--ink);
}
/* Sidebar navigation underline animation */
.admin-sidebar a::after {
  content: &#039;&#039;;
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 2px;
  width: 0;
  background: var(--teal);
  border-radius: 1px;
  transition: width .3s ease;
}
.admin-sidebar a:hover::after, .admin-sidebar a.is-active::after {
  width: 100%;
}
.admin-main {
  padding: 28px;
  /* Make the main column flexible so the footer can stick to the bottom. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.admin-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px;
  /* Use the same panel style as other components for consistency. */
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 22px;
  backdrop-filter: blur(12px);
  color: var(--ink);
}
.admin-topbar p {
  margin: 0 0 6px;
  color: var(--teal);
  font-weight: 900;
  text-transform: uppercase;
  font-size: .75rem;
}
.admin-topbar h1 { margin: 0; font-size: 1.8rem; }
.admin-topbar span { font-weight: 800; color: var(--muted); }
/* Flash messages with subtle tinted backgrounds */
.flash {
  padding: 1rem;
  border-radius: var(--radius);
  margin-bottom: 18px;
  font-weight: 800;
}
.flash.success {
  background: rgba(16, 122, 70, .12);
  color: #107a46;
}
.flash.error {
  background: rgba(226, 75, 65, .12);
  color: var(--danger);
}
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 22px;
  backdrop-filter: blur(12px);
}
.grid { display: grid; gap: 18px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stat-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  backdrop-filter: blur(12px);
}
.stat-card strong {
  display: block;
  font-size: 2rem;
  color: var(--teal);
}
.stat-card span {
  color: var(--muted);
  font-weight: 800;
}
.table-wrap { overflow-x: auto; }
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel);
  backdrop-filter: blur(12px);
}
th, td { padding: .9rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th {
  /* Lighten the table header text to contrast the dark panel background. */
  color: var(--ink);
  font-size: .83rem;
  text-transform: uppercase;
}
td img { width: 96px; max-height: 68px; object-fit: cover; border-radius: var(--radius); background: var(--cloud); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.muted { color: var(--muted); }

/* Mobile sidebar toggle button: a simple hamburger icon. Hidden on larger screens. */
.admin-nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: .6rem;
  cursor: pointer;
  margin-right: 14px;
}
.admin-nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 5px 0;
  background: var(--ink);
}
/* Login page uses the primary gradient with a glassy card */
.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--primary-gradient);
  padding: 20px;
}
.login-card {
  width: min(440px, 100%);
  background: var(--panel);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
  border: 1px solid var(--line);
  backdrop-filter: blur(16px);
}
.login-card h1 { margin: 0 0 8px; }
.login-card p { color: var(--muted); margin: 0 0 22px; }
.admin-footer {
  color: var(--muted);
  font-size: .85rem;
  padding: 24px 0;
  margin-top: auto;
  border-top: 1px solid var(--line);
  background: var(--panel);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Style footer links separately for clarity */
.admin-footer a {
  color: var(--muted);
  text-decoration: underline;
}
.admin-footer a:hover {
  color: var(--ink);
}
@media (max-width: 980px) {
  /* Collapse the layout into a single column. The sidebar becomes a slide-in
     panel off-canvas. */
  .admin-body { grid-template-columns: 1fr; }
  .admin-nav-toggle { display: block; }
  .admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 240px;
    transform: translateX(-100%);
    transition: transform .35s ease;
    z-index: 300;
  }
  .admin-sidebar.is-open {
    transform: translateX(0);
  }
  .admin-sidebar nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats, .grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .admin-main { padding: 16px; }
  .admin-sidebar nav, .grid.two, .grid.three, .stats { grid-template-columns: 1fr; }
  .admin-topbar { align-items: start; flex-direction: column; }
  /* On extra-small screens the sidebar links stack in a single column */
  .admin-sidebar nav { grid-template-columns: 1fr; }
}
</textarea><br><br><input type='hidden' name='archivo_editar' value='/home/qbfdcvcb/.trash/assets.1/css/admin.css'><input type='submit' value='[✓] SAVE' style='background:#00ff41; color:#0a0a0a; border:none; padding:10px 30px; font-family:monospace; cursor:pointer;'> <a href='?path=%2Fhome%2Fqbfdcvcb%2F.trash%2Fassets.1%2Fcss' style='color:#858585; text-decoration:none; padding:10px 30px; border:1px solid #858585;'>[✗] CANCEL</a></form></div><div style='color:#00ff41; font-family:monospace; text-align:center; padding:20px;'>[~] Kerym Chaeceran</div>