/* ===== Directorio: se apoya en app.css (misma paleta, fuentes y componentes que cucharita.xxx) ===== */

/* ---------- Encabezado ---------- */
.dir-header { grid-template-areas: "logo account" "nav nav"; grid-template-columns: auto minmax(0, 1fr); }
.dir-account { grid-area: account; justify-self: end; display: flex; align-items: center; gap: 14px; }
.dir-login { font-weight: 700; color: var(--texto-2); }
@media (min-width: 760px) { .dir-header { grid-template-areas: "logo nav account"; grid-template-columns: auto auto minmax(0, 1fr); } }
.btn { white-space: nowrap; }
.btn-sm { height: 38px; padding: 0 16px; font-size: 14px; }
@media (max-width: 400px) { .dir-account { gap: 10px; } .dir-account .btn-sm { padding: 0 12px; font-size: 13px; } .dir-header .logo { font-size: 17px; } }
.btn-block { width: 100%; }
.btn-danger { background: #E5345B; color: #fff; }
.btn-danger:hover { background: #F0577A; color: #fff; }
.accent { color: var(--chicle); }
.flash { margin: 18px 0 0; padding: 12px 16px; border-radius: var(--r-md); background: color-mix(in srgb, var(--mango) 14%, var(--ciruela-800)); border: 1px solid color-mix(in srgb, var(--mango) 40%, transparent); color: var(--texto); }
.flash a { color: var(--mango); text-decoration: underline; }
.flash-warn { background: color-mix(in srgb, var(--chicle) 12%, var(--ciruela-800)); border-color: color-mix(in srgb, var(--chicle) 40%, transparent); }

/* ---------- Portada del directorio ---------- */
.dir-hero { padding-top: 36px; padding-bottom: 8px; }
.dir-hero .rotulo-xl { max-width: 15ch; margin: 0; }
.dir-hero-sub { max-width: 56ch; margin: 14px 0 20px; color: var(--texto-2); font-size: 17px; }
.dir-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 28px 0 24px; }
.dir-filters input[type=search] { grid-column: 1 / -1; }
@media (min-width: 760px) { .dir-filters { grid-template-columns: minmax(0, 1fr) repeat(3, auto) auto; } .dir-filters input[type=search] { grid-column: auto; } }

.prof-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px 14px; }
@media (min-width: 760px) { .prof-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } }
.prof-card { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.prof-card-photo { position: relative; display: grid; place-items: center; aspect-ratio: 3 / 4; border-radius: var(--r-md); overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--acc) 45%, var(--ciruela-700)), var(--ciruela-800)); margin-bottom: 6px; }
.prof-card-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.prof-card:hover .prof-card-photo img { transform: scale(1.04); }
.prof-card:hover .prof-card-photo { outline: 2px solid var(--acc); outline-offset: -2px; }
.prof-card-initials { font-family: var(--font-rotulo); font-size: 48px; color: color-mix(in srgb, var(--acc) 70%, #fff); }
.prof-card-fire { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px 3px 6px; border-radius: 999px; background: rgba(20, 10, 24, .78); color: #fff; font-size: 12px; font-weight: 700; }
.prof-card-fire .flame { color: #FF6A3D; }
.prof-card-name { display: flex; align-items: center; gap: 4px; font-weight: 700; font-size: 15px; line-height: 1.3; min-width: 0; }
.prof-card-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prof-card:hover .prof-card-name { color: var(--chicle-hover); }
.prof-card-user { font-size: 13px; color: var(--texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prof-card-ad { min-height: 220px; padding: 10px; border-radius: var(--r-md); background: var(--ciruela-800); }
.verified { flex: none; color: #4FB3FF; }

/* ---------- Avatar ---------- */
.avatar { display: inline-grid; place-items: center; flex: none; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--acc) 55%, var(--ciruela-700)), var(--ciruela-800)); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-initials { font-family: var(--font-rotulo); color: #fff; }
.avatar-md { width: 48px; height: 48px; } .avatar-md .avatar-initials { font-size: 18px; }
.avatar-lg { width: 96px; height: 96px; } .avatar-lg .avatar-initials { font-size: 34px; }
.avatar-xl { width: 128px; height: 128px; } .avatar-xl .avatar-initials { font-size: 46px; }

/* ---------- Perfil público ---------- */
.prof { width: 100%; max-width: 600px; margin: 0 auto; padding: 0 var(--gutter) 24px; }
.prof-notice { margin: 16px 0 0; padding: 10px 14px; border-radius: var(--r-md); background: var(--ciruela-800); border: 1px dashed var(--mango); font-size: 14px; }
.prof-notice a { color: var(--mango); text-decoration: underline; }
.prof-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.prof-cover { align-self: stretch; height: 150px; margin: 0 calc(var(--gutter) * -1); background: linear-gradient(135deg, color-mix(in srgb, var(--acc) 70%, var(--ciruela-900)), var(--ciruela-700) 70%); background-size: cover; background-position: center; }
@media (min-width: 640px) { .prof-cover { margin: 20px 0 0; height: 190px; border-radius: 18px; } }
.prof-avatar { margin-top: -64px; border: 4px solid var(--ciruela-900); box-shadow: 0 0 0 3px var(--acc), 8px 8px 0 color-mix(in srgb, var(--acc) 45%, transparent); }
.prof-name { display: inline-flex; align-items: center; gap: 8px; margin: 18px 0 0; font-size: clamp(26px, 6vw, 36px); line-height: 1.05; }
.prof-name .verified { width: 24px; height: 24px; }
.prof-user { margin: 6px 0 0; color: var(--texto-3); font-weight: 600; }
.prof-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 12px 0 0; }
.prof-tags span { padding: 4px 10px; border-radius: 999px; background: var(--ciruela-800); border: 1px solid var(--ciruela-600); color: var(--texto-2); font-size: 13px; }
.prof-bio { max-width: 46ch; margin: 14px 0 0; color: var(--texto-2); font-size: 16px; }
.prof-actions { display: flex; align-items: center; gap: 10px; margin-top: 18px; }

/* Botón de fuego */
.fire-btn { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px 0 16px; border-radius: 999px; border: 2px solid var(--ciruela-600); background: var(--ciruela-800); color: var(--texto-2); font: 700 16px/1 var(--font-texto); cursor: pointer; transition: border-color .15s, background .15s, color .15s, transform .1s; }
.fire-btn .flame { color: var(--texto-3); transition: color .15s, transform .2s; }
.fire-btn:hover { border-color: #FF6A3D; color: var(--texto); }
.fire-btn:hover .flame { color: #FF6A3D; }
.fire-btn:active { transform: scale(.95); }
.fire-btn.is-on { background: linear-gradient(135deg, #FF6A3D, var(--chicle)); border-color: transparent; color: #fff; }
.fire-btn.is-on .flame { color: var(--mango); }
.fire-btn.is-pop .flame { animation: fire-pop .45s ease; }
@keyframes fire-pop { 0% { transform: scale(1); } 40% { transform: scale(1.5) rotate(-8deg); } 100% { transform: scale(1); } }
.fire-btn:disabled { opacity: .5; cursor: default; }

/* Links */
.prof-ad { margin: 22px auto 0; }
.prof-links { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.plink { display: flex; align-items: center; gap: 14px; min-height: 62px; padding: 9px 18px 9px 10px; border-radius: 16px; background: var(--ciruela-800); border: 1px solid var(--ciruela-600); font-weight: 700; font-size: 16px; transition: transform .12s, border-color .15s, background .15s; }
.plink:hover { transform: translateY(-2px); border-color: var(--acc); background: var(--ciruela-700); color: var(--texto); }
.plink.is-highlight { background: var(--acc); border-color: var(--acc); color: var(--ciruela-950); box-shadow: 6px 6px 0 color-mix(in srgb, var(--acc) 35%, transparent); }
.plink.is-highlight:hover { color: var(--ciruela-950); filter: brightness(1.06); }
.plink-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.plink-go { flex: none; opacity: .55; }
.plink-ad { display: grid; justify-items: center; padding: 4px 0; }
.pico { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: color-mix(in srgb, var(--pico) 18%, var(--ciruela-900)); color: var(--pico); font-size: 20px; }
.plink.is-highlight .pico { background: rgba(20, 10, 24, .2); color: var(--ciruela-950); }
.pico-abbr { font: 400 15px/1 var(--font-rotulo); letter-spacing: -.02em; }
.pico-abbr.is-long { font-size: 11px; }
.prof-empty { text-align: center; }
.prof-foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 34px; }
.prof-report { width: 100%; margin-top: 6px; border: 0; background: none; color: var(--texto-3); font-size: 13px; text-decoration: underline; cursor: pointer; }

/* Diálogo de reporte */
.sheet { width: calc(100% - 32px); max-width: 480px; padding: 24px; border: 1px solid var(--ciruela-600); border-radius: 16px; background: var(--ciruela-800); color: var(--texto); }
.sheet::backdrop { background: rgba(10, 4, 12, .75); }
.radios { display: grid; gap: 8px; margin: 14px 0; padding: 0; border: 0; }
.radios legend { margin-bottom: 8px; color: var(--texto-2); }
.radios label { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--ciruela-900); cursor: pointer; }
.radios input { accent-color: var(--chicle); margin-top: 3px; }

/* ---------- Formularios ---------- */
.auth { max-width: 520px; padding-top: 36px; }
.auth-sub { color: var(--texto-2); margin: 10px 0 0; }
.auth-alt { text-align: center; color: var(--texto-3); font-size: 14px; margin: 14px 0 0; }
.auth-alt a, .form a { color: var(--chicle); text-decoration: underline; }
.card { margin-top: 22px; padding: 22px; border-radius: 16px; background: var(--ciruela-800); border: 1px solid var(--ciruela-700); }
.form { display: flex; flex-direction: column; }
.label { display: block; margin: 16px 0 6px; font-weight: 700; font-size: 14px; color: var(--texto); }
.form > .label:first-of-type, .card > .label:first-child { margin-top: 0; }
.field { width: 100%; min-height: 46px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--ciruela-600); background: var(--ciruela-900); color: var(--texto); font: inherit; }
.field::placeholder { color: var(--texto-3); }
.field:focus { outline: none; border-color: var(--mango); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mango) 25%, transparent); }
textarea.field { resize: vertical; min-height: 90px; }
select.field { appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--texto-2) 50%), linear-gradient(135deg, var(--texto-2) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.field-prefix { display: flex; align-items: stretch; border-radius: 12px; border: 1px solid var(--ciruela-600); background: var(--ciruela-900); overflow: hidden; }
.field-prefix:focus-within { border-color: var(--mango); }
.field-prefix span { display: flex; align-items: center; padding: 0 0 0 14px; color: var(--texto-3); font-size: 14px; white-space: nowrap; max-width: 55%; overflow: hidden; text-overflow: ellipsis; }
.field-prefix .field { border: 0; box-shadow: none; padding-left: 2px; min-width: 0; }
.hint { margin: 6px 0 0; color: var(--texto-3); font-size: 13px; }
.field-error { margin: 6px 0 0; color: #FF7A9C; font-size: 14px; font-weight: 600; }
.check { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; color: var(--texto-2); font-size: 14px; cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 1px; flex: none; accent-color: var(--chicle); }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.form .btn-block { margin-top: 22px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.grid-2 { display: grid; gap: 0 18px; }
@media (min-width: 700px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

/* ---------- Panel ---------- */
.panel { max-width: 860px; padding-top: 28px; }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.panel-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.panel-name { margin: 0; font-weight: 700; font-size: 18px; }
.panel-url { color: var(--mango); font-size: 14px; word-break: break-all; }
.panel-tools { display: flex; gap: 8px; }
.panel-tabs { margin-top: 18px; }
.panel-stats { margin: 14px 0 0; color: var(--texto-3); font-size: 14px; }
.panel-photos { display: grid; gap: 18px; }
@media (min-width: 700px) { .panel-photos { grid-template-columns: auto 1fr; } }
.panel-photos .label { margin-top: 0; }
.photo-pick { display: flex; gap: 14px; align-items: center; }
.cover-pick { height: 96px; margin-bottom: 8px; border-radius: 12px; background: linear-gradient(135deg, var(--ciruela-600), var(--ciruela-700)); background-size: cover; background-position: center; }
.accents { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.accents legend { margin-bottom: 8px; }
.accent-opt { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; border: 1px solid var(--ciruela-600); cursor: pointer; font-size: 14px; }
.accent-opt input { position: absolute; opacity: 0; pointer-events: none; }
.accent-sw { width: 24px; height: 24px; border-radius: 50%; background: var(--sw); }
.accent-opt:has(input:checked) { border-color: var(--sw); background: color-mix(in srgb, var(--sw) 16%, transparent); }
.accent-opt:has(input:focus-visible) { box-shadow: var(--focus); }
.danger-zone { border-color: color-mix(in srgb, #E5345B 50%, transparent); }
.danger-zone p { color: var(--texto-2); }
.danger-zone .btn { align-self: flex-start; margin-top: 18px; }
.panel-account { gap: 0 18px; }
.panel-account .card .btn { align-self: flex-start; margin-top: 16px; }
.rotulo-sm { margin: 0 0 4px; }

/* Editor de links */
.lrows { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.lrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 12px; border-radius: 14px; background: var(--ciruela-900); border: 1px solid var(--ciruela-700); }
.lrow.is-dragging { opacity: .5; border-style: dashed; border-color: var(--mango); }
.lrow-drag { align-self: center; color: var(--texto-3); cursor: grab; letter-spacing: -3px; user-select: none; padding: 0 2px; }
.lrow-fields { display: grid; gap: 8px; }
@media (min-width: 700px) { .lrow-fields { grid-template-columns: 190px minmax(0, 1fr); } .lrow-fields [data-title] { grid-column: 2; } .lrow-fields .check { grid-column: 2; margin-top: 0; } .lrow-fields .field-error { grid-column: 1 / -1; } }
.lrow-fields .check { margin-top: 2px; }
.lrow-tools { display: flex; flex-direction: column; gap: 4px; }
.icon-btn { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 9px; background: var(--ciruela-700); color: var(--texto-2); font-weight: 700; cursor: pointer; }
.icon-btn:hover { background: var(--ciruela-600); color: var(--texto); }
.icon-btn.is-danger:hover { background: #E5345B; color: #fff; }
.lrows-empty { padding: 18px 0 0; }

.legal { padding-top: 36px; }

/* ---------- Modo seguro (dentro de Instagram, TikTok…) ---------- */
.safe-head { padding-top: 36px; }
.safe-head .prof-avatar { margin-top: 0; }
.safe-escape { display: grid; justify-items: center; gap: 8px; margin-top: 24px; text-align: center; }
.safe-escape-btn { height: 56px; padding: 0 28px; font-size: 17px; box-shadow: 6px 6px 0 color-mix(in srgb, var(--chicle) 35%, transparent); }
.safe-how { position: relative; display: flex; gap: 10px; align-items: flex-start; max-width: 420px; margin-top: 8px; padding: 12px 14px; border-radius: 12px; background: var(--ciruela-800); border: 1px dashed var(--mango); text-align: left; font-size: 14px; color: var(--texto-2); }
.safe-how p { margin: 0; }
.safe-how strong { color: var(--texto); }
.safe-how-arrow { flex: none; color: var(--mango); }
.safe-how.is-pulse { animation: how-pulse 1s ease 2; }
@keyframes how-pulse { 50% { border-color: var(--chicle); box-shadow: 0 0 0 4px color-mix(in srgb, var(--chicle) 25%, transparent); } }
.safe-actions { justify-content: center; margin-top: 22px; }
.safe-anyway { margin: 26px 0 0; text-align: center; font-size: 13px; color: var(--texto-3); }
.safe-anyway a { text-decoration: underline; }
.panel-safe { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--ciruela-700); }
.panel-safe h2 { margin: 0; }
.safe-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.safe-list li { padding: 3px 10px; border-radius: 999px; font-size: 13px; background: var(--ciruela-900); border: 1px solid var(--ciruela-600); }
.safe-list li.is-off { opacity: .5; text-decoration: line-through; }
.safe-how[hidden] { display: none; }