/* =========================================================
ALQUIFE LUDAOS
ADMIN PANEL
========================================================= */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  }

:root {
--bg: #0b0d0f;
--panel: #13171a;
--panel-hover: #171c20;
--border: #252a2e;
--border-light: #30363b;

--text: #f5f5f5;
--text-soft: #c9cdd1;
--text-muted: #92979d;
--text-dark: #666d73;

--accent: #b7f34a;
--accent-dark: #18200f;

--success: #63e6a0;
--success-dark: #10251b;

--danger: #ff7070;
--warning: #f3c969;

}

/* =========================================================
BODY
========================================================= */

body {
font-family: Inter, Arial, sans-serif;
background: var(--bg);
color: var(--text);
min-height: 100vh;
}

/* =========================================================
CONTENEDOR
========================================================= */

.admin-container {
width: min(1200px, 92%);
margin: 0 auto;
padding: 50px 0;
}

/* =========================================================
LOGIN
========================================================= */

.login-panel {
width: min(520px, 100%);
margin: 80px auto 0;
}

#login-form {
width: 100%;
max-width: 450px;
}

/* =========================================================
HEADER
========================================================= */

.admin-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 30px;
margin-bottom: 40px;
}

.admin-header-info {
min-width: 0;
}

.admin-header h1 {
font-size: clamp(30px, 5vw, 48px);
line-height: 1.05;
margin-bottom: 10px;
}

.admin-header p {
color: var(--text-muted);
}

.admin-header-actions {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}

/* =========================================================
EYEBROW
========================================================= */

.eyebrow {
display: block;
font-size: 11px;
font-weight: 800;
letter-spacing: 1.8px;
color: var(--accent);
margin-bottom: 10px;
}

/* =========================================================
PANELES
========================================================= */

.admin-panel {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 18px;
padding: 28px;
}

.panel-title {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 20px;
margin-bottom: 30px;
}

.panel-title h2 {
font-size: 24px;
line-height: 1.2;
}

.panel-description {
color: var(--text-muted);
margin-top: 7px;
line-height: 1.5;
}

/* =========================================================
TARJETAS PRINCIPALES
========================================================= */

.admin-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 30px;
}

.admin-card {
appearance: none;
width: 100%;
text-align: left;
background: var(--panel);
border: 1px solid var(--border);
border-radius: 16px;
padding: 22px;
display: flex;
flex-direction: column;
gap: 8px;
color: var(--text);
cursor: pointer;

transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;

}

.admin-card:hover {
background: var(--panel-hover);
border-color: var(--border-light);
transform: translateY(-2px);
}

.admin-card span {
font-size: 25px;
margin-bottom: 3px;
}

.admin-card strong {
font-size: 18px;
}

.admin-card small {
color: #858b91;
line-height: 1.4;
}

/* =========================================================
NAVEGACIÓN
========================================================= */

.admin-nav {
display: flex;
gap: 10px;
margin-bottom: 20px;
flex-wrap: wrap;
}

.admin-nav-button {
border: 1px solid var(--border);
background: var(--panel);
color: #aeb4b9;
padding: 11px 16px;
border-radius: 10px;
cursor: pointer;
font-weight: 700;


transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;


}

.admin-nav-button:hover {
border-color: #444b51;
color: white;
}

.admin-nav-button.active {
background: var(--accent);
color: #111;
border-color: var(--accent);
}

/* =========================================================
BOTONES
========================================================= */

.primary-button {
border: none;
border-radius: 10px;
padding: 12px 18px;
background: var(--accent);
color: #111;
font-weight: 800;
cursor: pointer;


transition:
    opacity 0.2s ease,
    transform 0.2s ease;


}

.primary-button:hover {
opacity: 0.9;
transform: translateY(-1px);
}

.primary-button:active {
transform: translateY(0);
}

.primary-button:disabled {
opacity: 0.6;
cursor: wait;
}

.full-button {
width: 100%;
margin-top: 20px;
}

/* =========================================================
BOTÓN VOLVER
========================================================= */

.back-button {
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;


color: #111;
background: var(--accent);

padding: 12px 18px;
border-radius: 10px;

font-weight: 800;
white-space: nowrap;


}

.back-login-button {
display: inline-block;
margin-top: 20px;


color: var(--text-muted);
text-decoration: none;

font-size: 14px;
font-weight: 700;

transition: color 0.2s ease;


}

.back-login-button:hover {
color: var(--accent);
}

.back-results-button {
border: 1px solid var(--border-light);
background: #1b2024;
color: var(--text-soft);


padding: 8px 12px;
border-radius: 8px;

cursor: pointer;
font-size: 12px;
font-weight: 800;

transition: all 0.2s ease;


}

.back-results-button:hover {
background: #252a2e;
color: white;
border-color: #444b51;
}

/* =========================================================
LOGOUT
========================================================= */

.logout-button {
border: 1px solid var(--border-light);
background: #1b2024;
color: var(--text-soft);


padding: 12px 18px;
border-radius: 10px;

font-family: Inter, Arial, sans-serif;
font-weight: 800;

cursor: pointer;

transition: all 0.2s ease;


}

.logout-button:hover {
background: #252a2e;
color: white;
border-color: #444b51;
}

/* =========================================================
FORMULARIOS
========================================================= */

.form-group {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 18px;
}

.form-group label {
font-size: 13px;
font-weight: 700;
color: var(--text-soft);
}

.form-group input {
width: 100%;


padding: 14px 16px;

border-radius: 10px;
border: 1px solid var(--border-light);

background: var(--bg);
color: white;

font-size: 15px;

outline: none;

transition: border-color 0.2s ease;


}

.form-group input:focus {
border-color: var(--accent);
}

.login-button {
border: none;
border-radius: 10px;


padding: 14px 20px;

background: var(--accent);
color: #111;

font-weight: 800;
font-size: 14px;

cursor: pointer;
margin-top: 5px;


}

.login-button:hover {
opacity: 0.9;
}

.login-error {
color: var(--danger);
margin-top: 15px;
font-size: 14px;
}

/* =========================================================
CARGANDO
========================================================= */

.loading {
color: var(--text-muted);
padding: 10px 0;
}

/* =========================================================
JORNADAS
========================================================= */

.matchday-card {
border: 1px solid var(--border);
border-radius: 14px;


padding: 20px;
margin-bottom: 12px;

display: flex;
justify-content: space-between;
align-items: center;

gap: 20px;


}

.matchday-card:last-child {
margin-bottom: 0;
}

.matchday-card h3 {
margin-bottom: 6px;
}

.matchday-meta {
color: #858b91;
font-size: 13px;
}

.matchday-badges {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}

.badge {
padding: 6px 9px;


border-radius: 20px;

background: #20252a;
color: #bfc4c8;

font-size: 11px;
font-weight: 800;


}

.badge.official {
background: var(--accent-dark);
color: var(--accent);
}

.badge.published {
background: var(--success-dark);
color: var(--success);
}

/* =========================================================
BOTONES RESULTADOS
========================================================= */

.results-button,
.edit-results-button {
border: 1px solid var(--border-light);
background: #1b2024;
color: white;


padding: 8px 12px;
border-radius: 8px;

cursor: pointer;

font-size: 12px;
font-weight: 800;

transition: all 0.2s ease;


}

.results-button:hover,
.edit-results-button:hover {
background: var(--accent);
color: #111;


border-color: var(--accent);

transform: translateY(-1px);


}

.edit-results-button:disabled {
opacity: 0.6;
cursor: wait;
}

.publish-button {
border: none;
border-radius: 8px;


padding: 8px 12px;

font-size: 13px;
font-weight: 700;

cursor: pointer;

background: #111827;
color: white;

transition: 0.2s ease;


}

.publish-button:hover {
transform: translateY(-1px);
opacity: 0.9;
}

.publish-button:disabled {
opacity: 0.6;
cursor: wait;
}

/* =========================================================
RESULTADOS
========================================================= */

.results-list {
margin-top: 20px;
}

.result-row {
display: grid;


grid-template-columns: 50px 1fr 180px;

align-items: center;

gap: 15px;

padding: 14px 0;

border-bottom: 1px solid var(--border);


}

.result-row:last-child {
border-bottom: none;
}

.result-number {
color: var(--text-dark);


font-size: 13px;
font-weight: 800;


}

.result-player {
display: flex;
align-items: center;


gap: 12px;

min-width: 0;


}

.result-avatar {
width: 38px;
height: 38px;
min-width: 38px;


border-radius: 50%;

display: flex;
align-items: center;
justify-content: center;

background: #252a2e;
color: white;

font-weight: 800;

overflow: hidden;


}

.result-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}

.result-player strong {
color: white;


overflow: hidden;
text-overflow: ellipsis;


}

.result-input {
width: 100%;


padding: 11px 13px;

border-radius: 9px;
border: 1px solid var(--border-light);

background: var(--bg);
color: white;

font-size: 15px;

outline: none;


}

.result-input:focus {
border-color: var(--accent);
}

.result-points {
width: 100%;


padding: 11px 13px;

border-radius: 9px;
border: 1px solid var(--border);

background: #1b2024;
color: var(--text);

font-size: 15px;
font-weight: 700;

text-align: right;


}

.results-actions {
margin-top: 25px;
}

.results-success {
color: var(--success);
font-size: 14px;
margin-top: 12px;
}

/* =========================================================
MODAL
========================================================= */

.modal-container {
position: fixed;
inset: 0;


background: rgba(0, 0, 0, 0.72);

display: flex;
justify-content: center;
align-items: center;

padding: 20px;

z-index: 100;


}

.modal {
width: min(500px, 100%);
max-height: 90vh;


overflow-y: auto;

background: var(--panel);

border: 1px solid var(--border-light);
border-radius: 18px;

padding: 28px;


}

.modal-header {
display: flex;
justify-content: space-between;
align-items: flex-start;


margin-bottom: 25px;


}

.close-button {
background: transparent;
border: none;


color: var(--text-muted);

font-size: 28px;
line-height: 1;

cursor: pointer;

transition: color 0.2s ease;


}

.close-button:hover {
color: white;
}

.checkbox-row {
display: flex;
align-items: center;


gap: 10px;

margin: 15px 0;

color: var(--text-soft);

font-size: 14px;

cursor: pointer;


}

.checkbox-row input {
width: 16px;
height: 16px;
}

/* =========================================================
JUGADORES
========================================================= */

.player-admin-row {
display: grid;


grid-template-columns:
    60px
    minmax(180px, 1.5fr)
    120px
    220px
    100px;

align-items: center;

gap: 18px;

padding: 18px 0;

border-bottom: 1px solid var(--border);


}

.player-admin-row:last-child {
border-bottom: none;
}

.player-admin-avatar-container {
display: flex;
justify-content: center;
}

.player-admin-avatar {
width: 48px;
height: 48px;


border-radius: 50%;

object-fit: cover;

border: 2px solid var(--border-light);

background: #252a2e;

display: flex;
align-items: center;
justify-content: center;

color: white;

font-size: 18px;
font-weight: 800;

overflow: hidden;


}

.player-admin-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}

.player-admin-avatar-placeholder {
display: flex;
align-items: center;
justify-content: center;


width: 100%;
height: 100%;

background: #252a2e;

color: white;

font-size: 18px;
font-weight: 800;


}

.player-admin-info,
.player-admin-status {
display: flex;
flex-direction: column;
gap: 7px;
}

.player-admin-info label,
.player-admin-status label {
font-size: 10px;


text-transform: uppercase;

letter-spacing: 1px;

font-weight: 800;

color: var(--text-dark);


}

.player-name-input {
width: 100%;


padding: 10px 12px;

border-radius: 8px;

border: 1px solid var(--border-light);

background: var(--bg);
color: white;

font-family: Inter, Arial, sans-serif;

font-size: 14px;

outline: none;


}

.player-name-input:focus {
border-color: var(--accent);
}

.player-admin-info small {
color: var(--text-dark);
font-size: 12px;
}

.player-status-button {
border: none;


padding: 8px 11px;

border-radius: 20px;

font-size: 11px;
font-weight: 800;

cursor: pointer;


}

.player-status-button.active {
background: var(--accent-dark);
color: var(--accent);
}

.player-status-button.inactive {
background: #252a2e;
color: #858b91;
}

.player-admin-avatar-actions {
display: flex;
flex-direction: column;
gap: 7px;
}

.avatar-upload-button {
display: inline-flex;


align-items: center;
justify-content: center;

padding: 8px 10px;

border-radius: 8px;

background: #1b2024;

border: 1px solid var(--border-light);

color: var(--text-soft);

font-size: 11px;
font-weight: 800;

cursor: pointer;


}

.avatar-upload-button:hover {
background: #252a2e;
color: white;
}

.delete-avatar-button {
border: none;


background: transparent;

color: var(--danger);

font-size: 11px;

cursor: pointer;


}

.delete-avatar-button:hover {
text-decoration: underline;
}

.save-player-button {
border: none;


padding: 9px 12px;

border-radius: 8px;

background: var(--accent);
color: #111;

font-size: 12px;
font-weight: 800;

cursor: pointer;

white-space: nowrap;


}

.save-player-button:hover {
opacity: 0.9;
}

.save-player-button:disabled {
opacity: 0.6;
cursor: wait;
}

/* =========================================================
BOTE
RESUMEN
========================================================= */

.pot-summary {
display: grid;


grid-template-columns: repeat(4, 1fr);

gap: 14px;

margin-bottom: 28px;


}

.pot-summary-card {
background: #0f1215;


border: 1px solid var(--border);

border-radius: 14px;

padding: 18px;

display: flex;
flex-direction: column;

gap: 8px;


}

.pot-summary-label {
color: var(--text-muted);


font-size: 12px;
font-weight: 700;

text-transform: uppercase;
letter-spacing: 0.8px;


}

.pot-summary-card strong {
font-size: 24px;
line-height: 1.1;


color: var(--text);


}

.pot-summary-main {
border-color: #39471f;
background: #151b10;
}

.pot-summary-main strong {
color: var(--accent);
}

/* =========================================================
BOTE
JORNADAS
========================================================= */

.pot-matchday {
border: 1px solid var(--border);


border-radius: 16px;

background: #0f1215;

overflow: hidden;

margin-bottom: 18px;


}

.pot-matchday-header {
display: flex;


justify-content: space-between;
align-items: center;

gap: 20px;

padding: 20px 22px;

border-bottom: 1px solid var(--border);


}

.pot-matchday-header h3 {
font-size: 20px;
margin: 0;
}

.pot-matchday-total {
display: flex;


align-items: baseline;

gap: 7px;

white-space: nowrap;


}

.pot-matchday-total span {
color: #858b91;
font-size: 12px;
}

.pot-matchday-total strong {
color: var(--accent);
font-size: 18px;
}

.pot-matchday-total small {
color: var(--text-dark);
font-size: 12px;
}

/* =========================================================
BOTE
LISTA DE PAGOS
========================================================= */

.payments-list {
width: 100%;
}

.payment-row {
display: grid;


grid-template-columns:
    minmax(130px, 1.2fr)
    100px
    120px
    150px
    145px
    minmax(140px, 1.4fr)
    100px
    90px;

align-items: center;

gap: 14px;

padding: 18px 22px;

border-bottom: 1px solid #20252a;


}

.payment-row:last-child {
border-bottom: none;
}

/* =========================================================
JUGADOR
========================================================= */

.payment-player {
display: flex;
flex-direction: column;


gap: 5px;


}

.payment-player strong {
color: #ffffff;
font-size: 14px;
}

.payment-player span {
color: var(--text-dark);
font-size: 12px;
font-weight: 700;
}

/* =========================================================
DEBE
========================================================= */

.payment-due {
display: flex;
flex-direction: column;


gap: 5px;


}

.payment-label {
display: block;


color: var(--text-dark);

font-size: 10px;

text-transform: uppercase;

letter-spacing: 1px;

font-weight: 800;


}

.payment-due strong {
display: block;


color: var(--danger);

font-size: 15px;


}

/* =========================================================
CAMPOS DE PAGO
========================================================= */

.payment-paid,
.payment-method,
.payment-date,
.payment-note {
display: flex;


flex-direction: column;

gap: 6px;


}

.payment-paid label,
.payment-method label,
.payment-date label,
.payment-note label {
color: var(--text-dark);


font-size: 10px;

text-transform: uppercase;

letter-spacing: 1px;

font-weight: 800;


}

/* =========================================================
INPUTS Y SELECT
========================================================= */

.payment-amount-input,
.payment-method-select,
.payment-date-input,
.payment-note-input {
width: 100%;
min-width: 0;


padding: 10px 11px;

border-radius: 8px;

border: 1px solid var(--border-light);

background: var(--bg);

color: var(--text);

font-family: Inter, Arial, sans-serif;

font-size: 13px;

outline: none;

transition: border-color 0.2s ease;


}

.payment-amount-input:focus,
.payment-method-select:focus,
.payment-date-input:focus,
.payment-note-input:focus {
border-color: var(--accent);
}

.payment-method-select {
cursor: pointer;
}

/* =========================================================
ESTADO DEL PAGO
========================================================= */

.payment-status {
display: flex;
justify-content: center;
}

.payment-status-badge {
display: inline-flex;


align-items: center;
justify-content: center;

padding: 7px 10px;

border-radius: 20px;

font-size: 11px;
font-weight: 800;

white-space: nowrap;


}

.payment-status-badge.pending {
background: #2a1717;
color: var(--danger);
}

.payment-status-badge.partial {
background: #2a2414;
color: var(--warning);
}

.payment-status-badge.paid {
background: var(--accent-dark);
color: var(--accent);
}

/* =========================================================
BOTÓN GUARDAR PAGO
========================================================= */

.save-payment-button {
border: none;


border-radius: 8px;

padding: 10px 12px;

background: var(--accent);

color: #111;

font-family: Inter, Arial, sans-serif;

font-size: 12px;
font-weight: 800;

cursor: pointer;

transition: all 0.2s ease;

white-space: nowrap;


}

.save-payment-button:hover {
opacity: 0.9;
transform: translateY(-1px);
}

.save-payment-button:active {
transform: translateY(0);
}

.save-payment-button:disabled {
opacity: 0.6;
cursor: wait;
}

/* =========================================================
SIN PENALIZACIONES / SIN DATOS
========================================================= */

.pot-empty-badge {
display: inline-flex;


align-items: center;

padding: 8px 12px;

border-radius: 20px;

background: #20252a;

color: #858b91;

font-size: 11px;

font-weight: 800;


}

/* =========================================================
MENSAJES BOTE
========================================================= */

.pot-success {
color: var(--success);


font-size: 12px;

margin-top: 8px;


}

.pot-error {
color: var(--danger);


font-size: 12px;

margin-top: 8px;


}

/* =========================================================
RESPONSIVE
========================================================= */

@media (max-width: 1100px) {


.admin-grid {
    grid-template-columns: repeat(2, 1fr);
}

.pot-summary {
    grid-template-columns: repeat(2, 1fr);
}

.payment-row {
    grid-template-columns:
        1.2fr
        90px
        110px
        130px
        130px
        1.2fr
        90px
        80px;

    gap: 10px;

    padding: 16px;
}

.player-admin-row {
    grid-template-columns:
        60px
        1fr
        120px;
}

.player-admin-avatar-actions {
    grid-column: 2;
}

.save-player-button {
    grid-column: 3;
    grid-row: 2;
}


}

/* =========================================================
TABLET / MÓVIL
========================================================= */

@media (max-width: 800px) {


.admin-container {
    width: min(94%, 700px);
    padding: 30px 0;
}

.admin-header {
    flex-direction: column;
    gap: 20px;
}

.admin-header-actions {
    width: 100%;
}

.back-button,
.logout-button {
    flex: 1;
}

.panel-title {
    flex-direction: column;
    align-items: flex-start;
}

.matchday-card {
    flex-direction: column;
    align-items: flex-start;
}

.result-row {
    grid-template-columns: 35px 1fr;
}

.result-input,
.result-points {
    grid-column: 2;
}

/* BOTE */

.pot-summary {
    grid-template-columns: repeat(2, 1fr);
}

.pot-matchday-header {
    align-items: flex-start;
    flex-direction: column;
}

.pot-matchday-total {
    width: 100%;
}

.payment-row {
    grid-template-columns: 1fr 1fr;

    gap: 14px;

    padding: 18px;
}

.payment-player {
    grid-column: 1 / -1;
}

.payment-due {
    grid-column: 1;
}

.payment-paid {
    grid-column: 2;
}

.payment-method {
    grid-column: 1;
}

.payment-date {
    grid-column: 2;
}

.payment-note {
    grid-column: 1 / -1;
}

.payment-status {
    grid-column: 1;

    justify-content: flex-start;
}

.save-payment-button {
    grid-column: 2;
}

.player-admin-row {
    grid-template-columns:
        60px
        1fr
        120px;
}


}

/* =========================================================
MÓVIL
========================================================= */

@media (max-width: 600px) {


.admin-container {
    width: 94%;
    padding: 20px 0;
}

.admin-panel {
    padding: 20px;
    border-radius: 14px;
}

.admin-grid {
    grid-template-columns: 1fr;
    gap: 10px;
}

.admin-card {
    padding: 18px;
}

.admin-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.admin-nav-button {
    width: 100%;
}

.pot-summary {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.pot-summary-card {
    padding: 14px;
}

.pot-summary-card strong {
    font-size: 20px;
}

.pot-matchday-body {
    padding: 0 15px;
}

.payment-row {
    grid-template-columns: 1fr;
}

.payment-player,
.payment-due,
.payment-paid,
.payment-method,
.payment-date,
.payment-note,
.payment-status,
.save-payment-button {
    grid-column: 1;
}

.payment-status {
    justify-content: flex-start;
}

.save-payment-button {
    width: 100%;
}

.player-admin-row {
    grid-template-columns: 50px 1fr;

    gap: 12px;
}

.player-admin-avatar-actions {
    grid-column: 1 / -1;
}

.player-admin-status {
    grid-column: 2;
}

.save-player-button {
    grid-column: 1 / -1;
}

.modal {
    padding: 20px;
}


}

/* =========================================================
MÓVIL PEQUEÑO
========================================================= */

@media (max-width: 450px) {


.admin-nav {
    grid-template-columns: 1fr;
}

.admin-header-actions {
    flex-direction: column;
}

.back-button,
.logout-button {
    width: 100%;
}

.pot-summary {
    grid-template-columns: 1fr;
}

.payment-row {
    grid-template-columns: 1fr;
}

.result-row {
    grid-template-columns: 30px 1fr;
    gap: 10px;
}

}
/* =========================================================
   BOTE - JUGADORES CON DEUDA
========================================================= */

.debt-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

.debt-player {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 15px 18px;

    background: #0f1215;
    border: 1px solid #252a2e;
    border-radius: 12px;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.debt-player:hover {
    background: #15191c;
    border-color: #30363b;
    transform: translateY(-1px);
}


/* =========================================================
   INFORMACIÓN DEL JUGADOR
========================================================= */

.debt-player-info {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.debt-player-avatar {
    width: 42px;
    height: 42px;
    min-width: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #252a2e;
    color: #ffffff;

    font-size: 15px;
    font-weight: 800;

    overflow: hidden;
}

.debt-player-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.debt-player-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.debt-player-name {
    color: #f5f5f5;
    font-size: 14px;
    font-weight: 800;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.debt-player-status {
    color: #ff7070;
    font-size: 11px;
    font-weight: 700;
}


/* =========================================================
   PARTE DERECHA
========================================================= */

.debt-player-payment {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-shrink: 0;
}


/* =========================================================
   CANTIDAD
========================================================= */

.debt-player-amount {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}

.debt-player-amount-label {
    color: #666d73;
    font-size: 10px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.debt-player-amount strong {
    color: #ff7070;
    font-size: 17px;
    line-height: 1;
}


/* =========================================================
   BOTÓN REGISTRAR PAGO
========================================================= */

.debt-payment-button {
    border: 1px solid #30363b;

    background: #1b2024;
    color: #f5f5f5;

    padding: 9px 13px;

    border-radius: 8px;

    font-family: Inter, Arial, sans-serif;
    font-size: 12px;
    font-weight: 800;

    cursor: pointer;

    white-space: nowrap;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.debt-payment-button:hover {
    background: #b7f34a;
    border-color: #b7f34a;
    color: #111;

    transform: translateY(-1px);
}

.debt-payment-button:active {
    transform: translateY(0);
}


/* =========================================================
   CONTADOR DE DEUDORES
========================================================= */

.debt-count {
    display: inline-flex;
    align-items: center;

    padding: 6px 10px;

    border-radius: 20px;

    background: #2a1717;
    color: #ff7070;

    font-size: 11px;
    font-weight: 800;
}


/* =========================================================
   ESTADO VACÍO
========================================================= */

.debt-empty {
    padding: 25px 20px;

    border: 1px dashed #30363b;
    border-radius: 12px;

    text-align: center;

    color: #858b91;
    font-size: 13px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 650px) {

    .debt-player {
        padding: 14px;
        gap: 14px;
    }

    .debt-player-payment {
        gap: 12px;
    }

    .debt-player-amount strong {
        font-size: 15px;
    }

    .debt-payment-button {
        padding: 9px 10px;
    }
}


@media (max-width: 500px) {

    .debt-player {
        align-items: flex-start;
    }

    .debt-player-info {
        flex: 1;
    }

    .debt-player-payment {
        flex-direction: column;
        align-items: flex-end;
        gap: 8px;
    }

    .debt-player-amount {
        align-items: flex-end;
    }

    .debt-payment-button {
        width: 100%;
    }
}
/* ======================================================
   BOTE · JUGADORES CON DEUDA
   ====================================================== */

.pot-debtors {
    width: 100%;
    margin-top: 24px;
    background: #ffffff;
    border: 1px solid #e7e9ee;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.05);
}


/* ------------------------------------------------------
   CABECERA
   ------------------------------------------------------ */

.pot-debtors-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px;
    border-bottom: 1px solid #eef0f4;
    background: #fafbfc;
}


.pot-debtors-header > div {
    min-width: 0;
}


.pot-debtors-header .eyebrow {
    display: block;
    margin-bottom: 5px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8a92a3;
}


.pot-debtors-header h3 {
    margin: 0;
    font-size: 21px;
    line-height: 1.2;
    font-weight: 750;
    color: #151923;
}


.pot-debtors-count {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #fff1f1;
    border: 1px solid #ffd8d8;
    color: #d64545;
    font-size: 13px;
    font-weight: 700;
}


/* ------------------------------------------------------
   LISTA
   ------------------------------------------------------ */

.pot-debtors-list {
    width: 100%;
}


/* ------------------------------------------------------
   FILA DE JUGADOR
   ------------------------------------------------------ */

.pot-debtor-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    padding: 18px 24px;
    background: #ffffff;
    border-bottom: 1px solid #eef0f4;
    transition:
        background-color 0.18s ease,
        transform 0.18s ease;
}


.pot-debtor-row:last-child {
    border-bottom: none;
}


.pot-debtor-row:hover {
    background: #fafbfc;
}


/* ------------------------------------------------------
   JUGADOR
   ------------------------------------------------------ */

.pot-debtor-player {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1;
}


.pot-debtor-avatar {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 50%;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #eef1f5;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.10);
}


.pot-debtor-avatar-placeholder {
    font-size: 17px;
    font-weight: 800;
    color: #687080;
    background: #eef1f5;
}


.pot-debtor-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    gap: 4px;
}


.pot-debtor-info strong {
    display: block;
    margin: 0;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 750;
    color: #171b24;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.pot-debtor-info span {
    display: block;
    margin: 0;
    font-size: 13px;
    line-height: 1.2;
    color: #8a92a3;
}


/* ------------------------------------------------------
   CANTIDAD + BOTÓN
   ------------------------------------------------------ */

.pot-debtor-amount {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    flex-shrink: 0;
}


.pot-debtor-amount strong {
    display: block;
    min-width: 70px;
    text-align: right;
    font-size: 17px;
    line-height: 1;
    font-weight: 800;
    color: #d64545;
}


/* ------------------------------------------------------
   BOTÓN REGISTRAR PAGO
   ------------------------------------------------------ */

.register-payment-button {
    appearance: none;
    border: 0;
    border-radius: 10px;
    padding: 10px 15px;
    background: #151923;
    color: #ffffff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition:
        background-color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}


.register-payment-button:hover {
    background: #292f3b;
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(15, 23, 42, 0.16);
}


.register-payment-button:active {
    transform: translateY(0);
    box-shadow: none;
}


.register-payment-button:focus-visible {
    outline: 3px solid rgba(21, 25, 35, 0.18);
    outline-offset: 2px;
}


.register-payment-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}


/* ======================================================
   BOTE · ESTADO VACÍO
   ====================================================== */

.pot-empty {
    width: 100%;
    padding: 50px 25px;
    text-align: center;
    background: #ffffff;
    border: 1px solid #e7e9ee;
    border-radius: 18px;
}


.pot-empty-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #edf9f1;
    color: #269b52;
    font-size: 22px;
    font-weight: 800;
}


.pot-empty h3 {
    margin: 0 0 7px;
    font-size: 19px;
    color: #171b24;
}


.pot-empty p {
    margin: 0;
    color: #8a92a3;
    font-size: 14px;
}


/* ======================================================
   RESPONSIVE · MÓVIL
   ====================================================== */

@media (max-width: 700px) {

    .pot-debtors {
        border-radius: 15px;
    }


    .pot-debtors-header {
        align-items: flex-start;
        padding: 18px;
    }


    .pot-debtors-header h3 {
        font-size: 18px;
    }


    .pot-debtors-count {
        font-size: 12px;
        padding: 5px 9px;
    }


    .pot-debtor-row {
        align-items: flex-start;
        gap: 15px;
        padding: 16px 18px;
    }


    .pot-debtor-player {
        gap: 11px;
    }


    .pot-debtor-avatar {
        width: 42px;
        height: 42px;
        min-width: 42px;
    }


    .pot-debtor-info strong {
        font-size: 15px;
    }


    .pot-debtor-info span {
        font-size: 12px;
    }


    .pot-debtor-amount {
        flex-direction: column;
        align-items: flex-end;
        gap: 8px;
    }


    .pot-debtor-amount strong {
        min-width: 0;
        font-size: 16px;
    }


    .register-payment-button {
        padding: 9px 11px;
        font-size: 12px;
    }

}


/* ======================================================
   MÓVIL PEQUEÑO
   ====================================================== */

@media (max-width: 450px) {

    .pot-debtors-header {
        padding: 16px;
    }


    .pot-debtors-header .eyebrow {
        font-size: 10px;
    }


    .pot-debtors-header h3 {
        font-size: 17px;
    }


    .pot-debtors-count {
        font-size: 11px;
    }


    .pot-debtor-row {
        padding: 14px 16px;
    }


    .pot-debtor-player {
        gap: 9px;
    }


    .pot-debtor-avatar {
        width: 38px;
        height: 38px;
        min-width: 38px;
    }


    .pot-debtor-info strong {
        font-size: 14px;
    }


    .pot-debtor-info span {
        font-size: 11px;
    }


    .pot-debtor-amount strong {
        font-size: 15px;
    }


    .register-payment-button {
        padding: 8px 9px;
        font-size: 11px;
    }

}
/* ======================================================
   DEUDORES DEL BOTE
   ====================================================== */

.pot-debtors {
    margin-top: 24px;
}

.pot-debtors-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}

.pot-debtors-header h3 {
    margin: 4px 0 0;
    font-size: 20px;
    font-weight: 700;
}

.pot-debtors-count {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    padding: 7px 12px;
    border-radius: 999px;
    white-space: nowrap;
}

.pot-debtors-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* FILA DE CADA DEUDOR */

.pot-debtor-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 16px 18px;

    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color);
    border-radius: 14px;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.pot-debtor-row:hover {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-hover);
    transform: translateY(-1px);
}

/* JUGADOR */

.pot-debtor-player {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.pot-debtor-avatar {
    width: 44px;
    height: 44px;
    min-width: 44px;

    border-radius: 50%;

    object-fit: cover;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 16px;
    font-weight: 700;

    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);

    overflow: hidden;
}

.pot-debtor-avatar-placeholder {
    color: var(--text-primary);
}

.pot-debtor-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.pot-debtor-info strong {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.pot-debtor-info span {
    font-size: 12px;
    color: var(--text-muted);
}

/* CANTIDAD + BOTÓN */

.pot-debtor-amount {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.pot-debtor-amount strong {
    font-size: 16px;
    font-weight: 800;
    color: var(--danger-color);
    white-space: nowrap;
}

/* BOTÓN REGISTRAR PAGO */

.register-payment-button {
    border: 1px solid var(--accent-color);
    background: transparent;
    color: var(--accent-color);

    padding: 8px 13px;

    border-radius: 9px;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.register-payment-button:hover {
    background: var(--accent-color);
    color: #fff;
    transform: translateY(-1px);
}

.register-payment-button:active {
    transform: translateY(0);
}


/* ======================================================
   RESPONSIVE
   ====================================================== */

@media (max-width: 700px) {

    .pot-debtors-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .pot-debtor-row {
        align-items: stretch;
        flex-direction: column;
        gap: 14px;
    }

    .pot-debtor-amount {
        width: 100%;
        justify-content: space-between;
    }

    .register-payment-button {
        flex: 1;
        max-width: 180px;
    }

}
/* ==========================================================
   FIX DEFINITIVO — LISTA DE JUGADORES CON DEUDA
   ========================================================== */

#pot-matchdays-list .pot-debtors {
    background: transparent !important;
    color: #f5f7fa !important;
}

#pot-matchdays-list .pot-debtors-header {
    background: transparent !important;
    color: #f5f7fa !important;
}

#pot-matchdays-list .pot-debtors-header h3 {
    color: #f5f7fa !important;
}

#pot-matchdays-list .pot-debtors-count {
    background: #1c1f26 !important;
    color: #aeb5c2 !important;
    border: 1px solid #303540 !important;
}

#pot-matchdays-list .pot-debtors-list {
    background: transparent !important;
}

#pot-matchdays-list .pot-debtor-row {
    background: #181b21 !important;
    color: #f5f7fa !important;
    border: 1px solid #2d323c !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}

#pot-matchdays-list .pot-debtor-row:hover {
    background: #20242c !important;
    border-color: #3b414d !important;
}

#pot-matchdays-list .pot-debtor-player {
    background: transparent !important;
}

#pot-matchdays-list .pot-debtor-info {
    background: transparent !important;
}

#pot-matchdays-list .pot-debtor-info strong {
    color: #f5f7fa !important;
}

#pot-matchdays-list .pot-debtor-info span {
    color: #9299a6 !important;
}

#pot-matchdays-list .pot-debtor-amount {
    background: transparent !important;
}

#pot-matchdays-list .pot-debtor-amount strong {
    color: #ff6b6b !important;
}

#pot-matchdays-list .pot-debtor-avatar {
    background: #242832 !important;
    color: #f5f7fa !important;
    border: 1px solid #363c47 !important;
}

#pot-matchdays-list .register-payment-button {
    background: transparent !important;
    color: #7dd3a7 !important;
    border: 1px solid #7dd3a7 !important;
}

#pot-matchdays-list .register-payment-button:hover {
    background: #7dd3a7 !important;
    color: #111 !important;
}
/* =========================================================
   CONFIGURACIÓN
========================================================= */

#settings-section {
    animation: fadeIn 0.2s ease;
}


/* =========================================================
   BLOQUES DE CONFIGURACIÓN
========================================================= */

.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 25px;
}

.settings-card {
    background: var(--panel-background, #ffffff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.settings-card.full-width {
    grid-column: 1 / -1;
}

.settings-card-header {
    margin-bottom: 20px;
}

.settings-card-header h3 {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 700;
}

.settings-card-header p {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.5;
}


/* =========================================================
   FORMULARIOS
========================================================= */

.settings-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.settings-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.settings-form .form-group {
    margin-bottom: 0;
}

.settings-form label {
    display: block;
    margin-bottom: 7px;
    font-size: 14px;
    font-weight: 600;
}

.settings-form input,
.settings-form select,
.settings-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 13px;
    border: 1px solid #d1d5db;
    border-radius: 9px;
    background: #fff;
    color: #111827;
    font-size: 14px;
    font-family: inherit;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.settings-form input:focus,
.settings-form select:focus,
.settings-form textarea:focus {
    outline: none;
    border-color: #111827;
    box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.08);
}


/* =========================================================
   REGLAS DE PENALIZACIÓN
========================================================= */

.penalty-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.penalty-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 13px 15px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f9fafb;
}

.penalty-position {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.penalty-position strong {
    font-size: 14px;
}

.penalty-position span {
    color: #6b7280;
    font-size: 12px;
}

.penalty-input {
    position: relative;
    width: 110px;
}

.penalty-input input {
    padding-right: 30px !important;
    text-align: right;
}

.penalty-input span {
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    font-size: 13px;
    pointer-events: none;
}


/* =========================================================
   BOTONES
========================================================= */

.settings-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 5px;
}

.settings-save-button {
    border: none;
    border-radius: 9px;
    padding: 11px 18px;
    background: #111827;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition:
        background 0.2s ease,
        transform 0.1s ease;
}

.settings-save-button:hover {
    background: #1f2937;
}

.settings-save-button:active {
    transform: translateY(1px);
}

.settings-save-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}


/* =========================================================
   MENSAJES
========================================================= */

.settings-message {
    min-height: 20px;
    margin: 0;
    font-size: 13px;
}

.settings-message.success {
    color: #15803d;
}

.settings-message.error {
    color: #dc2626;
}


/* =========================================================
   INFORMACIÓN DE LA CONFIGURACIÓN
========================================================= */

.settings-info {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.settings-info-item {
    padding: 14px;
    border-radius: 10px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
}

.settings-info-label {
    display: block;
    margin-bottom: 4px;
    color: #6b7280;
    font-size: 12px;
}

.settings-info-value {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}


/* =========================================================
   ANIMACIÓN
========================================================= */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 800px) {

    .settings-grid {
        grid-template-columns: 1fr;
    }

    .settings-card.full-width {
        grid-column: auto;
    }

    .settings-form-row {
        grid-template-columns: 1fr;
    }

    .settings-info {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 500px) {

    .settings-card {
        padding: 18px;
        border-radius: 13px;
    }

    .penalty-row {
        padding: 11px 12px;
    }

    .penalty-input {
        width: 95px;
    }

    .settings-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .settings-save-button {
        width: 100%;
    }
}
/* ======================================================
   BOTÓN BORRAR JORNADA
   ====================================================== */

.delete-matchday-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    padding: 9px 13px;

    border: 1px solid rgba(220, 38, 38, 0.25);
    border-radius: 8px;

    background: rgba(220, 38, 38, 0.07);
    color: #dc2626;

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.15s ease,
        box-shadow 0.2s ease;
}


/* Hover */

.delete-matchday-button:hover {
    background: rgba(220, 38, 38, 0.12);
    border-color: rgba(220, 38, 38, 0.45);
    color: #b91c1c;

    box-shadow:
        0 3px 10px rgba(220, 38, 38, 0.12);

    transform: translateY(-1px);
}


/* Click */

.delete-matchday-button:active {
    transform: translateY(0);
    box-shadow: none;
}


/* Desactivado mientras borra */

.delete-matchday-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
/* ======================================================
   HISTORIAL DE PAGOS
====================================================== */

.pot-payments-section {
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid var(--border);
}

.pot-payments-header {
    margin-bottom: 18px;
}

.pot-payments-header h3 {
    margin: 5px 0 4px;
}

.pot-payments-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pot-payment-row {
    display: grid;
    grid-template-columns: minmax(180px, 1.2fr) minmax(220px, 1.5fr) auto;
    align-items: center;
    gap: 20px;
    padding: 16px 18px;
    background: var(--panel-soft);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
}

.pot-payment-player {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.pot-payment-avatar {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
}

.pot-payment-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #252a2f;
    color: var(--text-soft);
    font-size: 13px;
    font-weight: 700;
}

.pot-payment-player-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.pot-payment-player-info strong {
    color: var(--text);
    font-size: 13px;
}

.pot-payment-player-info span {
    color: var(--text-muted);
    font-size: 10px;
}

.pot-payment-details {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    color: var(--text-muted);
    font-size: 10px;
}

.pot-payment-amount {
    color: var(--green);
    font-size: 15px;
}

.pot-payment-note {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pot-payment-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.edit-payment-button,
.delete-payment-button {
    border: 0;
    border-radius: 8px;
    padding: 8px 11px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}

.edit-payment-button {
    background: rgba(183, 243, 74, 0.08);
    color: var(--green);
}

.delete-payment-button {
    background: rgba(255, 107, 107, 0.08);
    color: #ff6b6b;
}

.edit-payment-button:hover,
.delete-payment-button:hover {
    filter: brightness(1.15);
}

.edit-payment-button:disabled,
.delete-payment-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}


@media (max-width: 850px) {

    .pot-payment-row {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .pot-payment-actions {
        justify-content: flex-end;
    }

}


@media (max-width: 600px) {

    .pot-payment-row {
        padding: 14px;
    }

    .pot-payment-details {
        gap: 7px 12px;
    }

    .pot-payment-actions {
        width: 100%;
    }

    .edit-payment-button,
    .delete-payment-button {
        flex: 1;
    }

}