:root{
  --book-w: 900px;
  --book-h: 600px;
  --cover-thickness: 14px;
  --page-radius: 14px;
  --shadow: 28px;
  --duration: 900ms;
  --easing: cubic-bezier(.2,.85,.2,1);

  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --border: #d8deef;
  --text: #1f2532;
  --muted: #475569;
  --shadow-soft: 0 10px 24px rgba(15, 23, 42, .08);
}

html{
  -webkit-text-size-adjust:100%;
}

.ca-app-shell,
.ca-app-shell *{
  box-sizing:border-box;
}

.ca-app-shell{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:20px;
  color:var(--text);
  background:transparent;
}

/* =============================
   NAV PRINCIPAL
============================= */
.ca-nav-links,
.ca-app-shell > p:first-of-type + p{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  margin:10px 0 28px;
}

.ca-nav-links a,
.ca-app-shell > p:first-of-type + p a{
  text-decoration:none;
  color:var(--text);
  font-weight:900;
  font-size:clamp(1.25rem, 2.2vw, 2rem);
  letter-spacing:.02em;
  padding:10px 18px;
  border-radius:999px;
}

/* =============================
   FORMULARIOS
============================= */
.ca-search-panel,
.ca-albums-panel{
  margin-top:8px;
}

.ca-search-form,
.ca-create-form,
.ca-create-album-form{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
}

.ca-create-form,
.ca-create-album-form,
.ca-app-shell form[action*="admin-post"]:has(input[name="action"][value="ca_create_album"]){
  justify-content:flex-end;
  width:100%;
  margin:8px 0 22px;
}

.ca-app-shell input[type="text"],
.ca-app-shell input[name="name"],
.ca-app-shell select{
  min-height:58px;
  padding:14px 18px;
  border-radius:999px;
  border:2px solid var(--border);
  background:#fff;
  color:var(--text);
  font-size:1rem;
  outline:none;
  box-shadow:none;
}

.ca-app-shell input[type="text"],
.ca-app-shell input[name="name"]{
  min-width:min(420px, 90vw);
}

.ca-app-shell input[type="text"]:focus,
.ca-app-shell input[name="name"]:focus,
.ca-app-shell select:focus{
  border-color:#111;
}

.ca-app-shell button,
.ca-app-shell input[type="submit"]{
  min-height:58px;
  padding:14px 24px;
  border:0;
  border-radius:999px;
  background:#111;
  color:#fff;
  font-weight:800;
  font-size:1rem;
  cursor:pointer;
  box-shadow:var(--shadow-soft);
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.ca-app-shell button:hover,
.ca-app-shell input[type="submit"]:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(0,0,0,.12);
}

.ca-app-shell button[style*="color:red"]{
  background:#111 !important;
  color:#fff !important;
}

/* =============================
   TARJETAS / RESULTADOS / ÁLBUMES PLANOS
============================= */
.ca-result-card,
.ca-album-list-item,
.ca-album-card-plain,
.ca-search-card{
  border:2px solid var(--border);
  border-radius:20px;
  padding:14px;
  margin-bottom:12px;
  background:var(--surface);
  box-shadow:var(--shadow-soft);
}

.ca-result-thumb,
.ca-album-card-plain img,
.ca-search-thumb,
.ca-app-shell .ca-result-card img,
.ca-app-shell .ca-search-card img{
  display:block;
  width:140px;
  max-width:100%;
  height:auto;
  margin:0 auto 10px;
}

.ca-search-body{
  text-align:center;
}

.ca-search-actions{
  margin-top:12px;
}

.ca-search-actions form{
  display:grid;
  gap:10px;
}

/* =============================
   GRID DE BÚSQUEDA
============================= */
.ca-search-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));
  gap:18px;
  align-items:start;
}

/* =============================
   LISTA DE ÁLBUMES
============================= */
.ca-album-list{
  display:grid;
  gap:14px;
}

.ca-album-list-item,
.ca-app-shell .ca-album-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding:18px;
  border:2px solid var(--border);
  border-radius:24px;
  background:#fff;
  box-shadow:var(--shadow-soft);
}

.ca-app-shell a{
  color:#111;
  font-weight:700;
}

.ca-back-link{
  margin:0 0 20px;
}

.ca-delete-binder{
  margin-bottom:20px;
}

.ca-pagination{
  margin-top:20px;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

/* =============================
   WRAPPERS DEL BINDER
============================= */
.phone-fit{
  position:relative;
  width:100%;
  display:grid;
  place-items:center;
}

.ca-album-wrap{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:20px 0 40px;
  overflow:visible;
}

/* =============================
   BINDER / LIBRO
============================= */
.album{
  width:min(95vw, var(--book-w));
  height:var(--book-h);
  position:relative;
  perspective:2000px;
  perspective-origin:50% 50%;
  cursor:pointer;
  user-select:none;
}

.album[role="button"]{
  outline:none;
}

.album:focus-visible{
  outline:3px solid #4b8bff;
  outline-offset:6px;
  border-radius:16px;
}

.table{
  position:absolute;
  inset:-60px -80px -120px -80px;
  background:radial-gradient(1200px 300px at 50% 0%, rgba(0,0,0,.07), transparent 60%) no-repeat bottom center / 100% 40%;
  z-index:0;
}

.book{
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  z-index:1;
}

.block{
  position:absolute;
  inset:0;
  border-radius:var(--page-radius);
  box-shadow:
    0 var(--shadow) calc(var(--shadow) * 2) rgba(0,0,0,.18),
    0 6px 22px rgba(0,0,0,.12);
  background:linear-gradient(180deg, #fefefe, #f9fbff);
  overflow:hidden;
}

.pages{
  position:absolute;
  inset:0;
  border-radius:var(--page-radius);
  background:repeating-linear-gradient(90deg, #ffffff 0 8px, #fbfbfb 8px 16px);
  padding:28px;
  opacity:0;
  transition:opacity var(--duration) var(--easing);
  overflow-y:auto;
}

.grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
}

.card{
  position:relative;
  border-radius:5px;
  background:#000;
  border:1px solid #e7ebf5;
  box-shadow:0 6px 18px rgba(10,22,70,.06);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:270px;
}

.card .thumb{
  aspect-ratio:140/200;
  width:70%;
  object-fit:cover;
  display:block;
  margin:8px auto 0 auto;
  background:#eef2fb;
  border-radius:8px;
  transform-style:preserve-3d;
  will-change:transform;
  transition:transform 140ms ease;
}

.card .body{
  padding:4px 10px 14px;
  display:flex;
  gap:1px;
  flex-direction:column;
}

.card h4{
  font-size:.95rem;
  margin:0 0 1px;
  color:#fff;
  line-height:1.2;
}

.card p{
  font-size:.85rem;
  margin:1px;
  color:#fff;
}

.card form{
  padding:0 10px 10px;
  margin-top:auto;
}

.card form button{
  width:100%;
}

/* =============================
   PORTADA
============================= */
.cover{
  position:absolute;
  inset:0;
  transform-origin:left center;
  transform:rotateY(0deg) translateZ(var(--cover-thickness));
  transform-style:preserve-3d;
  will-change:transform, box-shadow;
  transition:transform var(--duration) var(--easing), box-shadow var(--duration) var(--easing);
  border-radius:var(--page-radius);
  box-shadow:
    6px 8px 22px rgba(0,0,0,.12),
    2px 2px 0 rgba(0,0,0,.12) inset,
    -2px -2px 0 rgba(255,255,255,.4) inset;
  overflow:hidden;
}

.cover-front,
.cover-inside{
  position:absolute;
  inset:0;
  border-radius:var(--page-radius);
  backface-visibility:hidden;
}

.cover-front{
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}

.cover-front::after{
  content:"CARD ALBUM";
  position:absolute;
  left:0;
  right:0;
  top:48%;
  transform:translateY(-50%);
  text-align:center;
  font-size:52px;
  font-weight:800;
  letter-spacing:.04em;
  color:#fff;
  text-shadow:0 6px 18px rgba(0,0,0,.28);
}

.cover-inside{
  background:repeating-linear-gradient(0deg, #ffffff, #ffffff 6px, #f5f7fb 6px, #f5f7fb 12px);
  transform:rotateY(180deg);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.04);
}

.album.open .cover{
  transform:rotateY(-145deg) translateZ(var(--cover-thickness));
  box-shadow:12px 14px 28px rgba(0,0,0,.18);
}

.album.open .pages{
  opacity:1;
}

.spine{
  position:absolute;
  left:-10px;
  top:50%;
  translate:0 -50%;
  width:22px;
  height:60%;
  border-radius:12px;
  background:linear-gradient(180deg, #1a2750, #2b4c98);
  filter:blur(2px);
  opacity:.12;
  pointer-events:none;
}

.album.dim{
  opacity:.05;
  transition:opacity var(--duration) var(--easing);
}

/* =============================
   PREVIEW DE CARTA
============================= */
.ca-preview-overlay{
  position:fixed;
  inset:0;
  background:rgba(255,255,255,0);
  opacity:0;
  pointer-events:none;
  z-index:9999;
  transition:opacity var(--duration) var(--easing), background var(--duration) var(--easing);
  display:grid;
  place-items:center;
  padding:24px;
}

.ca-preview-overlay.open{
  background:rgba(255,255,255,.98);
  opacity:1;
  pointer-events:auto;
}

.ca-preview-modal{
  width:min(560px, 92vw);
  max-width:92vw;
  transform:translateY(28px) scale(.92);
  opacity:0;
  transition:transform var(--duration) var(--easing), opacity var(--duration) var(--easing);
  display:flex;
  flex-direction:column;
  align-items:center;
}

.ca-preview-overlay.open .ca-preview-modal{
  transform:translateY(0) scale(1);
  opacity:1;
}

.ca-preview-close{
  position:absolute;
  top:16px;
  right:18px;
  border:0;
  background:transparent;
  font-size:34px;
  line-height:1;
  cursor:pointer;
  color:#222;
}

.ca-preview-media{
  width:100%;
  display:grid;
  place-items:center;
  perspective:1200px;
}

.ca-preview-image{
  width:min(430px, 82vw);
  max-width:100%;
  max-height:78vh;
  object-fit:contain;
  display:block;
  border-radius:18px;
  background:#fff;
  box-shadow:0 30px 80px rgba(0,0,0,.18);
  transform-style:preserve-3d;
  will-change:transform;
  transition:transform 140ms ease;
}

.ca-preview-meta{
  width:min(520px, 90vw);
  text-align:center;
  padding-top:18px;
}

.ca-preview-title{
  margin:0 0 6px;
  font-size:1.4rem;
  line-height:1.2;
  color:#111827;
}

.ca-preview-subtitle{
  margin:0;
  font-size:.98rem;
  line-height:1.45;
  color:#334155;
}

/* =============================
   RESPONSIVE
============================= */
@media (max-width: 920px){
  .grid{
    grid-template-columns:repeat(2, 1fr);
  }
}

@media (max-width: 640px){
  .grid{
    grid-template-columns:1fr;
  }

  .cover-front::after{
    font-size:34px;
  }

  .ca-preview-image{
    width:min(320px, 88vw);
  }

  .ca-preview-title{
    font-size:1.15rem;
  }

  .ca-app-shell input[type="text"],
  .ca-app-shell input[name="name"]{
    min-width:100%;
  }

  .ca-create-form,
  .ca-create-album-form,
  .ca-app-shell form[action*="admin-post"]:has(input[name="action"][value="ca_create_album"]){
    justify-content:flex-start;
  }
}

/* =============================
   NAV VISUAL
============================= */
.ca-nav{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  margin:10px 0 28px;
}

.ca-nav a{
  text-decoration:none;
  color:var(--text);
  font-weight:900;
  font-size:clamp(1.25rem, 2.2vw, 2rem);
  letter-spacing:.02em;
  padding:10px 18px;
  border-radius:999px;
}

/* =============================
   PREVIEW DE CARTA AVANZADO
============================= */
.ca-preview-modal-wide{
  width:min(1320px, 96vw);
  max-width:96vw;
  position:relative;
  background:#fff;
  border-radius:24px;
  box-shadow:0 30px 80px rgba(0,0,0,.18);
  padding:28px;
}

.ca-preview-layout{
  display:grid;
  grid-template-columns:minmax(260px, 320px) minmax(280px, 420px) minmax(320px, 1fr);
  gap:24px;
  align-items:start;
}

.ca-preview-overlay:not(.has-note-panel) .ca-preview-layout{
  grid-template-columns:minmax(280px, 420px) minmax(320px, 1fr);
}

.ca-preview-overlay:not(.has-note-panel) .ca-preview-notes{
  display:none !important;
}

.ca-preview-notes,
.ca-preview-side{
  background:#f8fafc;
  border:2px solid var(--border);
  border-radius:20px;
  padding:18px;
}

.ca-preview-notes h4,
.ca-preview-section h4{
  margin:0 0 12px;
  font-size:1rem;
  color:#0f172a;
}

.ca-preview-note-input{
  width:100%;
  min-height:220px;
  resize:none;
  border:2px solid var(--border);
  border-radius:16px;
  background:#fff;
  color:#111827;
  padding:14px;
  font:inherit;
  line-height:1.45;
  outline:none;
}

.ca-preview-note-input:focus{
  border-color:#111827;
}

.ca-preview-note-meta{
  display:flex;
  justify-content:flex-end;
  margin-top:8px;
  color:#475569;
  font-size:.92rem;
}

.ca-preview-note-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}

.ca-preview-note-actions button{
  min-height:48px;
  padding:12px 18px;
  border-radius:999px;
}

.ca-preview-note-status{
  min-height:20px;
  margin:10px 0 0;
  color:#0f766e;
  font-size:.92rem;
}

.ca-preview-note-status.is-error{
  color:#b91c1c;
}

.ca-preview-media{
  align-self:start;
}

.ca-preview-image{
  width:min(390px, 100%);
  max-height:78vh;
  margin:0 auto;
}

.ca-preview-side{
  text-align:left;
}

.ca-preview-title{
  margin:0 0 8px;
  font-size:2rem;
  line-height:1.1;
  color:#0f172a;
}

.ca-preview-subtitle{
  margin:0 0 18px;
  font-size:1rem;
  line-height:1.45;
  color:#475569;
}

.ca-preview-details{
  display:grid;
  gap:12px;
}

.ca-preview-row{
  display:grid;
  grid-template-columns:minmax(110px, 150px) 1fr;
  gap:12px;
  align-items:start;
  padding:10px 0;
  border-bottom:1px solid rgba(148,163,184,.22);
}

.ca-preview-row:last-child{
  border-bottom:0;
}

.ca-preview-label{
  font-weight:800;
  color:#111827;
}

.ca-preview-value{
  color:#334155;
  line-height:1.45;
}

.ca-preview-section{
  margin-top:12px;
}

.ca-preview-stack{
  display:grid;
  gap:12px;
}

.ca-preview-card-block{
  border:1px solid rgba(148,163,184,.25);
  background:#fff;
  border-radius:16px;
  padding:14px;
}

.ca-preview-block-title{
  font-weight:800;
  color:#0f172a;
  margin-bottom:6px;
}

.ca-preview-block-meta{
  color:#334155;
  margin-bottom:6px;
}

.ca-preview-block-text{
  color:#475569;
  line-height:1.5;
}

@media (max-width: 1100px){
  .ca-preview-modal-wide{
    width:min(980px, 96vw);
  }

  .ca-preview-layout{
    grid-template-columns:minmax(260px, 1fr) minmax(300px, 1.1fr);
  }

  .ca-preview-notes{
    grid-column:1 / -1;
  }
}

@media (max-width: 760px){
  .ca-preview-modal-wide{
    padding:18px;
  }

  .ca-preview-layout{
    grid-template-columns:1fr;
    gap:16px;
  }

  .ca-preview-title{
    font-size:1.45rem;
  }

  .ca-preview-row{
    grid-template-columns:1fr;
    gap:6px;
  }

  .ca-preview-image{
    width:min(320px, 92vw);
  }
}


/* =============================
   LIMITES Y PROGRESO
============================= */
.ca-limit-card{
  width:100%;
  margin:10px 0 18px;
  padding:14px 16px;
  border:2px solid var(--border);
  border-radius:18px;
  background:#fff;
  box-shadow:var(--shadow-soft);
}

.ca-limit-top{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-bottom:8px;
}

.ca-limit-label{
  font-weight:800;
  color:var(--text);
}

.ca-limit-value{
  color:var(--muted);
  font-weight:700;
}

.ca-limit-track{
  width:100%;
  height:12px;
  border-radius:999px;
  background:#e9eef8;
  overflow:hidden;
}

.ca-limit-fill{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#111,#444);
}

.ca-inline-limit{
  margin-top:12px;
  min-width:min(320px, 100%);
}

.ca-inline-limit .ca-limit-card{
  margin:0;
  padding:10px 12px;
  box-shadow:none;
}

.ca-inline-limit .ca-limit-label,
.ca-inline-limit .ca-limit-value{
  font-size:.92rem;
}

@media (max-width:640px){
  .ca-limit-top{
    flex-direction:column;
    align-items:flex-start;
  }

  .ca-inline-limit{
    min-width:100%;
  }
}